Firestore Timestamp转JavaScript Date报错问题求助

问题背景 #

开发实时聊天应用时，处理Firestore Timestamp转换遇到异常：提交新消息时控制台输出messageDate为Invalid Date，并抛出RangeError: Invalid time value错误。添加Timestamp前的旧消息用new Date()转换正常，但新消息提交失败。Firestore返回的Timestamp格式示例：createdAt: August 2, 2023 at 7:03:09 PM UTC-5。

提交消息代码 #

const handleSubmitForm = async (e) =>{
  e.preventDefault();
  if(message === "") return;

  // 错误的Timestamp转换尝试
  const messageDate = new Date(serverTimestamp);
  console.log(messageDate)
  
  const {uid, displayName, photoURL} = auth.currentUser;
  await addDoc(messagesRef, {
    text: message,
    createdAt: messageDate,
    user: displayName,
    userPic: photoURL,
    room,
    uid,
  });
  setMessage("")
}

渲染消息代码 #

{messages.map((message) =>(
      <p className='message-timestamp'>-{message.createdAt.toDate().toDateString()}</p>
))}

错误原因 #

serverTimestamp是Firestore提供的函数，并非直接的时间戳值。直接将函数引用传入new Date()，会因无法解析函数对象而得到Invalid Date。

解决方案 #

1. 提交消息时直接使用serverTimestamp() #

无需手动转换为JS Date对象，Firestore会自动将serverTimestamp()解析为服务器端生成的Timestamp存储：

const handleSubmitForm = async (e) =>{
  e.preventDefault();
  if(message === "") return;
  
  const {uid, displayName, photoURL} = auth.currentUser;
  await addDoc(messagesRef, {
    text: message,
    createdAt: serverTimestamp(), // 直接调用函数生成服务器时间戳
    user: displayName,
    userPic: photoURL,
    room,
    uid,
  });
  setMessage("")
}

2. 渲染时兼容新旧数据格式 #

Firestore返回的createdAt是Timestamp对象，调用其toDate()方法即可转换为JS Date对象。如果旧数据是普通Date类型，可添加判断实现兼容：

{messages.map((message) =>{
  const date = message.createdAt instanceof Date 
    ? message.createdAt 
    : message.createdAt.toDate();
  return <p className='message-timestamp'>-{date.toDateString()}</p>
})}

内容的提问来源于stack exchange，提问作者Randy Steward