I am currently utilizing Firebase as my database along with Next.js. I have encountered an issue when trying to read data from Firebase, specifically related to the due date field, which is of timestamp datatype. Here is the code snippet where I attempt to retrieve data from Firebase:
const dbInstance = collection(firestore, "tasks");
useEffect(() => {
getTasks();
}, []);
const getTasks = () => {
getDocs(dbInstance).then((data) => {
setTasksArray(
data.docs.map((item) => {
return { ...item.data() };
})
);
});
};
While iterating through all tasks in the tasks array, everything worked smoothly except for the due date. Upon researching a solution, I came across the toDate() function. When I tried task.duedate.toDate(), an error was triggered.
The approach that yielded some results for me is as follows:
{tasksArray.map((task) => {
return (
<Flex
flexDir={"column"}
key={task.creatorId}
hidden={task.priority != "" ? true : false}
>
<Text>{task.taskName}</Text>
<Text fontSize="xs">
{safeJsonStringify(task.dueDate)}
</Text>
</Flex>
);
})}
While this displayed: {"seconds":1683300279,"nanoseconds":338000000}
I aim to present it in a more user-friendly manner similar to how it appears here on Stack Overflow.