I have created a form that, upon submission, adds a document with the data to my Firestore database. Additionally, I have set up a real-time listener on the collection where the document is added.
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()]
})
})
});
}
Subsequently, I am attempting to iterate through and display all the documents in the collection.
{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>
))
}
All was running smoothly until the introduction of the real-time listener. Now, an error has emerged stating:
TypeError: can't access property "seconds", report.reported is null...
reported: Object { seconds: 1664099305, nanoseconds: 349000000 }
...
What could be triggering this issue?