基于React与Firebase的网页聊天应用中createdAt字段无法在Chat组件渲染的问题求助

嘿，我刚仔细看了你的代码，马上就发现问题所在啦！你用firebase.firestore.FieldValue.serverTimestamp()添加的createdAt字段，其实是Firestore特有的Timestamp类型对象，不是普通的字符串或JavaScript Date对象——直接在React里渲染这个对象的话，它只会显示[object Object]或者啥都不显示，因为React不知道怎么解析它~

别担心，只需要两步就能搞定：

第一步：把Timestamp转换成JavaScript Date对象 #

在你获取消息的useEffect里，处理每个文档数据的时候，把createdAt转成JS原生的Date对象：

useEffect(() => {
  store.collection("messages").orderBy("createdAt").limit(100).onSnapshot(snapshot => {
    setMessages(snapshot.docs.map(doc => {
      const msgData = doc.data();
      return {
        id: doc.id, // 这里要补上文档ID哦！你之前解构的id其实不存在，doc.data()里不包含文档ID
        text: msgData.text,
        photoURL: msgData.photoURL,
        displayName: msgData.displayName,
        uid: msgData.uid,
        // 用toDate()把Firestore Timestamp转成JS Date，可选链避免空值报错
        createdAt: msgData.createdAt?.toDate() || new Date()
      };
    }));
  })
},[]) 

第二步：把Date对象格式化为可读的字符串 #

在渲染消息的时候，把Date对象转成用户能看懂的日期时间格式，比如用toLocaleString()生成本地化的时间字符串：

{messages.map(({id, text, photoURL, displayName, uid, createdAt}) => 
  <div key={id} className={`message ${uid === auth.currentUser.uid ? "sent" : "received"}`}>
    <img src={photoURL} alt="用户头像"/>
    <div className="displayName">{displayName}</div>
    {/* 格式化显示日期时间 */}
    <p>{createdAt.toLocaleString()}</p>
    <p>{text}</p>
  </div>
)}

另外补充个小细节：你之前的代码里，map函数里的key写在了内部的<div>上，其实应该把key放在最外层的循环元素上，我上面的代码已经帮你调整过来了，这样能避免React的key警告~

这样修改之后，createdAt就能正常显示啦！

内容的提问来源于stack exchange，提问作者Sirajeddine Aissa