Nextjs+Firebase读取Timestamp日期触发TypeError问题求助

问题原因 #

你遇到的TypeError: task.dueDate.toDate is not a function，是因为从Firestore获取的dueDate已经被序列化成包含seconds和nanoseconds的普通JavaScript对象，而非Firebase官方的Timestamp类实例——只有Timestamp实例才拥有toDate()方法。

解决方案 #

方案1：手动转换为JavaScript Date对象 #

在获取数据时，直接将seconds和nanoseconds转换为标准JS Date对象，后续即可正常格式化：

修改你的getTasks函数：

const getTasks = () => {
  getDocs(dbInstance).then((data) => {
    setTasksArray(
      data.docs.map((item) => {
        const taskData = item.data();
        // 处理dueDate字段
        const processedDueDate = taskData.dueDate 
          ? new Date(
              taskData.dueDate.seconds * 1000 + 
              taskData.dueDate.nanoseconds / 1000000
            )
          : null;
        
        return {
          ...taskData,
          dueDate: processedDueDate
        };
      })
    );
  });
};

方案2：配置Firestore自动转换Timestamp为Date #

如果希望所有Timestamp类型字段都自动转为Date对象，可以在初始化Firestore时添加配置：

import { getFirestore } from "firebase/firestore";
import { initializeApp } from "firebase/app";

const firebaseConfig = { /* 你的Firebase配置 */ };
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);

// 开启自动转换Timestamp为Date
firestore.settings({
  timestampsInSnapshots: true
});

配置后，调用item.data()时，Timestamp字段会直接返回JS Date对象，无需手动转换。

格式化日期为Stack Overflow风格 #

转换为Date对象后，使用Intl.DateTimeFormat生成类似Stack Overflow的友好日期格式（如May 5, 2023 at 10:44 AM）：

1. 定义格式化函数：

const formatFriendlyDate = (date) => {
  if (!date) return "无截止日期";
  return new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  }).format(date);
};

2. 在渲染时使用：

{tasksArray.map((task) => {
  return (
    <Flex
      flexDir={"column"}
      key={task.creatorId}
      hidden={task.priority != "" ? true : false}
    >
      <Text>{task.taskName}</Text>
      <Text fontSize="xs">
        {formatFriendlyDate(task.dueDate)}
      </Text>
    </Flex>
  );
})}

内容的提问来源于stack exchange，提问作者Sakib Hiader