React Native Expo使用FlatList报Objects are not valid as a React child错误如何解决

报错信息 #

Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

根因定位 #

错误出在你代码中的这一行：

<Text>{PostInfo.From_Date} - 11/10/2021</Text>

你从Firebase Firestore拉取的From_Date字段是Firebase原生的Timestamp类型，本质是包含seconds和nanoseconds两个属性的对象，React不允许直接将对象作为子元素放在<Text>等组件中渲染，因此抛出该错误。

修复方案 #

方案1：渲染时即时转换 #

直接调用Timestamp对象自带的toDate()方法转为JS原生Date对象，再格式化为字符串即可：

// 替换原有行，示例为转为本地化日期格式
<Text>{PostInfo.From_Date.toDate().toLocaleDateString()} - 11/10/2021</Text>

如果需要自定义日期格式，可自行拼接：

// 封装格式化方法
const formatFireDate = (timestamp) => {
  const date = timestamp.toDate()
  return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
}

// 渲染时调用
<Text>{formatFireDate(PostInfo.From_Date)} - 11/10/2021</Text>

方案2：拉取数据时统一预处理 #

在获取Firebase数据的逻辑里提前把所有Timestamp类型字段转为字符串，后续无需重复处理：

// 示例拉取数据逻辑
const getPostData = async () => {
  const postSnapshot = await firebase.firestore().collection('你的集合名').get()
  const processedData = postSnapshot.docs.map(doc => {
    const rawData = doc.data()
    return {
      ...rawData,
      // 预处理时间字段
      From_Date: rawData.From_Date.toDate().toLocaleDateString()
    }
  })
  setPostData(processedData)
  setPostLoaded(true)
}

兼容提示 #

如果存在字段为空的情况，可添加可选链判断避免报错：

{PostInfo.From_Date?.toDate?.().toLocaleDateString() || ''}

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