Vue.js结合Firestore使用useDocument获取数据后无法显示求助

你遇到的报错是因为useDocument返回的是一个响应式Ref对象，初始状态下它的值是undefined——Firestore的数据是异步获取的，模板首次渲染时数据还没加载完成，直接访问place.title自然会抛出"无法读取undefined的title属性"的错误。

虽然控制台最终能看到_rawValue里有数据，但那是异步请求完成后Ref更新后的状态，模板渲染的时机早于数据加载完成的时间。

这里提供几种简单有效的处理方式：

1. 使用可选链操作符（最简洁） #

在模板里通过?.操作符避免访问undefined属性：

<template>
  {{ place?.title }}
</template>

当place为undefined时，表达式会返回undefined而不报错，等数据加载完成后自动显示title内容。

2. 添加加载状态判断 #

通过v-if先判断数据是否存在，再渲染内容，同时可以显示加载提示：

<template>
  <div v-if="place">
    {{ place.title }}
  </div>
  <div v-else>
    数据加载中...
  </div>
</template>

3. 补充：修复代码中的小遗漏 #

你的代码里调用了getAnalytics但没有导入对应的模块，会导致额外报错，需要补充导入：

import { getAnalytics } from "firebase/analytics";

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