Firestore serverTimestamp在React中渲染时报对象无法作为子元素如何解决

问题原因 #

• 你拿到的time是Firebase内置的Timestamp类型对象，包含seconds（Unix时间戳秒数）和nanoseconds两个属性，React不支持直接渲染原生对象，所以触发报错
• 直接渲染time.seconds显示的是秒级Unix时间戳，需要转成JavaScript标准Date对象后再格式化为可读时间

解决方法 #

首先调用Timestamp对象自带的toDate()方法转成JS Date对象，之后可以用原生方法或者自定义逻辑格式化显示格式。

方案1：用JS原生方法快速格式化（无需额外依赖） #

直接在渲染位置调用转换即可，示例修改后的代码如下：

const Comment = ({id, name, text, time}) => {
  const deletePost = () => {
    //删除firebase storage里的图片
    
    db.collection("posts").doc(id).delete()
    .then(function(){
      console.log("POST删除成功")
    }).catch(function(error){
      console.log(error)
    });

  }
  // 提前转换时间为可读格式，可选链避免time为null时报错，toLocaleString会生成本地化的年月日时分秒格式
  const formatTime = time?.toDate().toLocaleString()
  return (
    <div style={{justifyContent: "space-around", maxWidth: "480px", marginTop: "10px", border: "2px solid #f3f3f3"}}className="comment">
      <div>
        <div>
      <strong>{text}</strong>
      <p>By {name}</p>
      </div>
      
      </div>
      <h1>{formatTime}</h1>
    </div>
  )
}

如果需要自定义格式，也可以手动从Date对象取值拼接：

const date = time.toDate()
const formatTime = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`

你也可以不用toDate()方法，手动把秒级时间戳转成Date，效果一致：

const date = new Date(time.seconds * 1000)

方案2：加加载中兜底（可选） #

因为serverTimestamp是在服务端生成的，第一次查询的时候可能存在短暂的空值状态，可以加个兜底展示避免报错：

const formatTime = time ? time.toDate().toLocaleString() : "时间加载中..."

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