FirebaseError：使用无效数据调用函数 updateDoc()答案

【问题标题】：FirebaseError: Function updateDoc() called with invalid dataFirebaseError：使用无效数据调用函数 updateDoc()
【发布时间】：2022-07-20 17:34:02
【问题描述】：

我正在该函数中编写一个函数 uploadPost() 我将一个文档添加到 firebase firestore 集合中，而不是选择一个图像并通过从 firebase 获取下载 url 来更新文档，但我收到类似的错误

FirebaseError: Function updateDoc() called with invalid data. Unsupported field value: a custom Promise object (found in field image in document posts/mcux46HsSK4mxycOIuev)

下面给出我的功能

const uploadPost = async () => {
        if (loading) return;

        setLoading(true);

        const docRef = await addDoc(collection(db, 'posts'), {
            username: session.user.username,
            caption: captionRef.current.value,
            profileImg: session.user.image,
            timestamp: serverTimestamp(),
        })

        const imageRef = ref(storage, `posts/${docRef.id}/image`);

        await uploadString(imageRef, selectedFile, 'data_url').then(async (snapshot) => {
            const downloadUrl = getDownloadURL(imageRef);
            await updateDoc(doc(db, 'posts', docRef.id), {
                image: downloadUrl
            });
        });

        setOpen(false);
        setLoading(false);
        setSelectedFile(null);
    }

这有什么问题，请对此提出一些建议。

【问题讨论】：

getDownloadURL 是异步函数吗？如果是这样，你必须 await 它来获取 downloadUrl 值，否则你只是在 updateDoc 调用中向 image 属性传递一个承诺（这可能会解释错误）。

标签： reactjs firebase next.js

【解决方案1】：

const uploadPost = async () => { 如果（加载）返回；

    setLoading(true);

    const docRef = await addDoc(collection(db,'posts'), {
        username: data?.user?.username, 
        caption: captionRef.current.value,
        profileImg: data?.user?.image,
        timestamp: serverTimestamp(),
    })

    const storage = getStorage(app);

    const imageRef = ref(storage, `posts/${docRef.id}/image`);

 await uploadString(imageRef, selectedFile, "data_url").then(async () => {
       const downloadURL = await getDownloadURL(imageRef);
       console.log('this is it' , downloadURL);
       await updateDoc(doc(db, 'posts', docRef.id) , {
        image: downloadURL,
       })
    }).catch((err) => {console.log(err)})

    setOpen(false);
    setLoading(false);
    setSelectedFile(null);
}

【讨论】：