Vue中如何根据Firestore文档数据渲染页面指定内容？

你完全可以实现基于文档Location值的条件渲染，问题出在你原来的模板代码存在语法错误，以下是修正后的完整实现步骤：

1. 正确获取单个用户文档 #

因为你是通过路由参数获取单个用户的Profile文档，应该使用getDocument而非getCollection（后者用于获取集合列表）：

import { useRoute } from 'vue-router'
import { getDocument } from 'vuefire'

const route = useRoute()
// 获取单个Profile文档，变量名用小写profile更符合JS规范
const { document: profile, error } = getDocument('Profile', route.params.id)

2. 修正模板中的条件渲染语法 #

你原来的代码存在三个关键错误：

• 字符串比较时未给A加引号（profile.Location是字符串类型，必须和字符串字面量比较）
• v-if条件的括号未闭合
• 标签未正确闭合、插值语法使用错误

修正后的模板代码：

<div v-if="error">{{ error }}</div>

<!-- 文档加载完成后才渲染内容 -->
<div v-if="profile" class="Profile">
  <!-- 正确显示用户名称 -->
  <p>{{ profile.Name }}</p>

  <!-- 仅当Location为'A'时显示该div -->
  <div v-if="profile.Location === 'A'">
    <p>Only Location A and not location B or any other</p>
  </div>

  <!-- 这里可以放其他需要显示的文档数据 -->
  <p>用户邮箱：{{ profile.Email }}</p>
  <p>联系方式：{{ profile.Phone }}</p>
</div>

<!-- 文档加载中显示加载动画 -->
<div v-else>
  <div class="spin"></div>
</div>

关键注意事项 #

• 必须确保profile已成功加载：v-if="profile"会在文档数据返回后才渲染内容，避免出现Cannot read properties of undefined的错误。
• 使用**严格相等运算符===**进行比较，避免因类型转换导致的意外判断结果。
• 如果需要匹配多个Location值（比如A或B），可以用逻辑或运算符：v-if="profile.Location === 'A' || profile.Location === 'B'"

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