Vue 3项目中如何使用date-fns格式化并显示Firestore timestamp字段

问题根因 #

核心原因是Vue3 Composition API中ref对象的访问规则差异，再叠加异步加载的时序问题：

• 你使用的getDocument组合式函数返回的document（也就是你重命名的review）是ref类型的响应式对象
• Vue模板会自动对ref对象解包，所以你在<template>里直接写review.createdAt可以正常访问属性
• 但在<script>的JS逻辑中（包括computed回调、普通console.log语句），访问ref对象的实际值必须加.value后缀，你没加的话实际访问的是ref实例本身的createdAt属性，自然是undefined
• 同时Firestore文档是异步拉取的，组件初始化执行setup函数时，数据还没返回，初始状态下review.value本身就是空对象，也不存在createdAt字段。

修复方案 #

调整computed逻辑，补充.value访问规则，同时保留存在性判断即可：

const computedDateToNow = computed(() => {
  // 先判断ref的值存在，再判断createdAt存在
  if (review.value?.createdAt) {
    return formatDistanceToNow(review.value.createdAt.toDate())
  }
  // 数据加载前可返回占位文本，也可以返回空字符串
  return '加载中'
})

如果要在JS中打印createdAt的值，不要直接在setup根作用域下打印，setup执行时数据还没拉取完成，必然是undefined，你可以放在computed的回调里，响应式更新时会自动触发打印。

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