VueJs中无法从Firestore文档获取lastName与firstName问题求助

问题修复方案 #

核心错误点如下：

• 模板直接访问user.displayName，用户未登录时user为null，直接访问属性触发报错
• 代码中使用了未定义的error变量，直接抛出引用错误中断执行
• Firestore查询返回的是QuerySnapshot实例，不能直接调用filter方法，需要先获取其docs属性再遍历
• 查询条件写死为固定值"Abe"，没有动态使用当前登录用户的displayName
• 监听user的逻辑没有判断user是否存在，用户未登录时也会发起无效请求

完整修改后代码

<template>
  <p>Process Payroll</p>
  <!-- 加v-if判断user存在再渲染，避免null报错 -->
  <h1 v-if="user">{{ user.displayName }} </h1>
  <p>姓氏：{{ lastName }}</p>
  <p>名字：{{ firstName }}</p>
  <h1>{{ docs }} </h1>
</template>

<script>
import getUser from '@/composables/getUser'
import { ref, onMounted, watch } from 'vue'
import { projectFirestore } from '@/firebase/config'

export default {
    setup() {
    const { user } = getUser();

    const lastName = ref("");
    const firstName = ref("");
    const docs = ref([]);

    const returnUser = async () => {
      // 先判断user存在才发起请求
      if (!user.value) return
      try {
        const res = await projectFirestore
          .collection("users")
          // 动态使用当前用户的displayName，不要写死
          .where("displayName", "==", user.value.displayName)
          .get();
        // QuerySnapshot要先取docs属性再遍历
        const matchedUsers = res.docs.map(doc => doc.data())
        if (matchedUsers.length) {
          // 取第一个匹配的用户数据
          const currentUserDoc = matchedUsers[0]
          lastName.value = currentUserDoc.lastName
          firstName.value = currentUserDoc.firstName
          docs.value = currentUserDoc
        }
      } catch (error) {
        // 捕获请求错误
        console.error('获取用户数据失败：', error)
      }
    };

    // 监听user变化，用户登录后自动触发查询，加deep、immediate配置保证触发时机正确
    watch(user, returnUser, { deep: true, immediate: true })

    onMounted(returnUser)

    return { user, docs, returnUser, lastName, firstName};
  },
}
</script>

修改说明

• 模板加了v-if="user"判断，用户未登录时不会渲染displayName相关内容，避免null报错
• 移除了未定义的error变量，改用try/catch捕获请求异常
• 正确处理Firestore返回的QuerySnapshot对象，先取docs属性再处理数据
• 动态使用当前登录用户的displayName查询，不再写死固定值
• 监听user时加了immediate配置，页面加载时如果用户已经登录会直接触发查询，无需等待mounted
• 拿到匹配的用户数据后直接赋值给lastName和firstName变量，可直接在模板中渲染使用

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