firestore 获取文档数据问题答案

【问题标题】：firestore getting doc data issuefirestore 获取文档数据问题
【发布时间】：2022-01-14 18:08:09
【问题描述】：

我试图从 firebase firestore 获取图像的 url，上传成功，但是当我尝试获取图像并显示它时，它给了我这个错误：

TypeError: undefined is not an object (evalating 'doc.push')

这是我获取数据的方法：

useEffect(() => {
        const result = db.collection("homeBackground").doc("bg_img").onSnapshot(snap => {
            const doc = snap.doc;
            setImages(doc.push(doc => doc.data()))
        });
        return result;
    }, []);

这就是我显示图像的方式：

{
    images.push((image) => {
         return (
            <img src={image.imageUrl} alt=""/>
                )
           })
}

【问题讨论】：

这能回答你的问题吗？ Firestore onSnapshot returns undefined
Doc 是一个文档快照，包含 createdBy 和 imageUrl。您如何访问这些字段？此外，您将在闭包之后返回结果，以便代码返回结果，该结果将不会被填充（Firestore 是异步的）

标签： reactjs firebase use-effect

【解决方案1】：

onSnapshot() 是一种异步 Observable 方法。您需要检查数据是否存在，然后分配给您想要的任何东西。

.onSnapshot(snap => {
            if(snap.exists()) { // Some methods returns object with .exist value/function.
               setImages(snap.data())
            }
        });

onSnapshot(snapshoot: QuerySnapshot<DocumentData> | DocumentSnapshot<DocumentData> => ...)这取决于你得到什么，你可以得到querysnapshot或DocumentSnapshot的通用对象。

当数据库中的数据发生变化时，该方法将触发。它返回取消订阅，您可以调用并停止观察数据库更改。

const unsubscription = db.collection("homeBackground").doc("bg_img").onSnapshot(snap => ...);

// later in time
unsubscription() // this will stop invoke method above.

【讨论】：

不工作...如果我做控制台日志，它会给我正确的数据..onSnapshot(doc => { console.log(doc.data()) });跨度>
@GabrieleSabatino 现在怎么样？我不知道你在 setImage() 函数中需要什么样的对象。
@GabrieleSabatino 已编辑检查是否有效。
TypeError: snap.exists 不是函数。（在 'snap.exists()' 中，'snap.exists' 为真）
@GabrieleSabatino 我使用的是 firebase 9+，我的方法没有变量。