即使有數據js，firestore也會得到null

Question

我有一個表單，在提交時我將一個包含數據的文檔添加到我的 firestore 數據庫中。 我在將文檔添加到的集合上有一個實時監聽器。

onSubmit={async(e) => {
                        e.preventDefault()
                        const form = document.querySelector(".activityForm")
                        const colRef = collection(db, "inactivity")

                        await addDoc(colRef, {
                            name: user.displayName,
                            from: form.from.value,
                            to: form.to.value,
                            reason: form.reason.value.trim(),
                            reported: serverTimestamp()
                        })
                        .then(() => {
                            console.log("Success!")
                            form.reset()
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                        const q = query(colRef, orderBy("reported", "desc") );
                        
                        const unsubscribe = onSnapshot(q, (querySnapshot) => {
                            setInactiveReps([])
                            querySnapshot.forEach((doc) => {
                                setInactiveReps(prev => {
                                    return [...prev, doc.data()]
                                    })
                            })
                        });
                    }

之后，我試圖通過 map 並顯示集合中的所有文檔。

                                {inactiveReps && inactiveReps.map(report => (

                                    date = formatDistance(
                                        new Date(report.reported.seconds*1000),
                                        new Date(),
                                        { 
                                          addSuffix: true,
                                          includeSeconds: true
                                        }
                                      ),
                                      console.log(report),

                                    <tr key={report.id} className="h-auto">
                                        <td className="text-white pl-[21px]">{report.name}</td>
                                        <td className="text-white pl-[21px]">{report.from}</td>
                                        <td className="text-white pl-[21px]">{report.to}</td>
                                        <td className="text-white pl-[21px]">{report.reason}</td>
                                        <td className="text-white pl-[21px]">{date}</td>
                                    </tr>
                                ))
                            }

它工作得很好..直到我添加了實時監聽器。 現在我收到以下錯誤： TypeError: can't access property "seconds", report.reported is null ，當它顯然不是 null 時，如果我記錄那里顯示的文檔：

..​.
reported: Object { seconds: 1664099305, nanoseconds: 349000000 }
​...

什么可能導致這種情況？

Answer 1

我尚未測試您的代碼，但問題很可能來自serverTimestamp() “在寫入數據中包含服務器生成的時間戳”這一事實。

因此，當您在前端執行addDoc()方法時， reported字段的值並未在前端設置，因為設置它的是服務器/后端。 但是，由於“延遲補償” ，您的聽眾將在數據發送到后端之前收到新數據的通知，導致report.reported為null 。

因此，您需要使用onSnapshot()向偵聽器集指示它必須只處理來自服務器/后端的事件。 這可以使用metadata.hasPendingWrites來完成，如下所示（未經測試）：

const unsubscribe = onSnapshot(q, (querySnapshot) => {
    setInactiveReps([])
    querySnapshot.forEach((doc) => {

        if (doc.metadata.hasPendingWrites) {
          // Do whatever you want: skip the doc or add a "pending" value for the timestamp
        } else {
            setInactiveReps(prev => {
                     return [...prev, doc.data()]
            })
        }  
    })
});