React报错Objects are not valid as a React child 时间戳异常

报错指向非常明确：你尝试直接渲染的内容里包含了Firestore返回的Timestamp时间对象，这个对象结构是{seconds: number, nanoseconds: number}，React不支持把普通对象作为文本子节点渲染。

问题出在Feed组件的这行代码：

<Text>{created_at}</Text>

你从Firestore取到的created_at字段不是普通的字符串/数字时间值，是Firebase自定义的Timestamp类型，console.log能正常打印是因为控制台支持输出对象结构，但文本组件只能接收基础类型值作为子元素。

两种常用处理方案，选一种即可：

• 渲染时直接转换格式
  调用Timestamp自带的toDate()方法转成JavaScript原生Date对象，再转成可渲染的时间字符串即可，替换原来的时间渲染代码：

  {/* 最简单的方式：直接转成本地默认格式时间字符串 */}
  <Text>{created_at?.toDate().toLocaleString()}</Text>
  

  如果需要自定义时间显示格式（比如显示“2小时前”“2024-05-20 14:30”这类样式），可以自行编写格式化逻辑，或者引入dayjs、date-fns这类轻量时间处理库实现。
• 数据获取阶段统一转换
  在遍历文档数据组装Feed组件props的时候就把时间字段转换完成，渲染层直接使用处理好的值，逻辑更清晰：

  {docSnapshot?.docs?.map((feed) => {
    const postData = feed.data()
    return (
      <Feed
        key={postData.id}
        navigation={navigation}
        username={postData.username}
        theme={postData.theme}
        body={postData.body}
        imagesURL={postData.imagesURL}
        photoURL={postData.photoURL}
        {/* 提前转成Date对象或格式化好的字符串 */}
        created_at={postData.created_at?.toDate()}
        comments={postData.comments}
        likes={postData.likes}
        shares={postData.shares}
      />
    )
  })}
  

后续跳转PostScreen传参时，也不要传递原始Timestamp对象，统一用转换后的值，避免其他页面渲染时触发同类报错。如果后续出现相同类型的报错，优先检查直接放在Text组件里的字段是不是对象类型即可。

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