Vue3中如何从Firebase Auth获取注册日期并解决无效日期问题

问题核心是同步渲染时用户认证状态未完全初始化，直接访问auth.currentUser.metadata.createdAt可能拿到未就绪的无效值，导致new Date()解析失败。下面是具体解决方法：

1. 监听用户认证状态变化后再处理 #

通过Auth的状态监听方法（比如Firebase Auth的onAuthStateChanged），等用户状态确认加载完成后再读取并转换时间戳：

const date = ref('')

auth.onAuthStateChanged(user => {
  if (user && user.metadata?.createdAt) {
    // 部分Auth库返回的时间戳是字符串类型，需先转为数字
    const timestamp = parseInt(user.metadata.createdAt)
    date.value = new Date(timestamp).toLocaleString()
  }
})

2. 在Vue生命周期中异步等待初始化完成 #

如果是Vue项目，可在onMounted钩子中通过Promise等待用户状态就绪：

import { ref, onMounted } from 'vue'

const date = ref('')

onMounted(async () => {
  const user = await new Promise(resolve => {
    auth.onAuthStateChanged(resolve)
  })
  
  if (user?.metadata?.createdAt) {
    const timestamp = parseInt(user.metadata.createdAt)
    date.value = new Date(timestamp).toLocaleDateString()
  }
})

3. 增加无效值判断避免报错 #

给时间转换加一层校验，防止无效值导致页面报错：

const formatCreatedAt = (timestamp) => {
  const validTimestamp = parseInt(timestamp)
  if (!timestamp || isNaN(validTimestamp)) {
    return '未知创建时间'
  }
  return new Date(validTimestamp).toLocaleString()
}

// 使用时直接调用
date.value = formatCreatedAt(auth.currentUser?.metadata?.createdAt)

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