Firestore查询返回的Timestamp字段渲染时显示Invalid Date如何解决

Firestore返回的itemAcquired是Firebase专属的Timestamp类型对象，不是JavaScript原生Date构造函数支持的入参格式，直接将该对象传入new Date()会导致构造日期失败，最终输出Invalid Date。

Firebase的Timestamp类型自带了标准转换方法，两种常用修复方式如下：

• 方案1（推荐，可保留纳秒精度）：直接调用Timestamp实例的toDate()方法转成原生Date对象

<ListItem>
  <Typography>Item Acquired At : </Typography>
  <ListItemText
    primary={user.items?.itemAcquired?.toDate().toLocaleDateString() ?? '时间未记录'}
  />
</ListItem>

• 方案2：提取Timestamp内的秒级时间戳，乘以1000转成JS支持的毫秒级时间戳后传入Date构造函数

<ListItem>
  <Typography>Item Acquired At : </Typography>
  <ListItemText
    primary={new Date((user.items?.itemAcquired?.seconds ?? 0) * 1000).toLocaleDateString()}
  />
</ListItem>

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