Vue异步函数中projectFirestore无法返回文档集合问题求助

核心错误点 #

• 定义的returnUser查询方法从未触发执行，没有发起Firestore请求
• Firestore返回的文档快照需要调用.data()方法才能读取存储的字段，原代码直接读取user1.displayName无法获取到实际值
• 代码中引用了未定义的error变量，会触发运行时报错，阻塞后续逻辑执行
• filter方法需要返回布尔值来判断是否保留项，原代码返回user.lastName的写法不符合过滤逻辑
• 当前登录用户user可能是异步初始化的，需要等待user加载完成后再执行查询，避免读取user.displayName时出现undefined

修正后完整代码 #

<template>
  <p>Process Payroll</p>
  <h1>{{ user?.displayName }} </h1>
  <h1>{{ docs }} </h1>
</template>

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

export default {
  setup(){
    const { user } = getUser()
    const docs = ref([])

    const returnUser = async () => {
      // 先判断当前用户是否加载完成
      if (!user.value?.displayName) return
      try {
        // 优化：直接用where条件查询，无需拉取整个users集合，性能更好
        const res = await projectFirestore
          .collection('users')
          .where('displayName', '==', user.value.displayName)
          .get()
        console.log('查询结果', res.docs)
        // 提取文档数据
        docs.value = res.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }))
      } catch (error) {
        console.error('查询出错：', error)
      }
    }

    // 监听用户加载状态，用户加载完成后自动执行查询
    watchEffect(() => {
      if (user.value) returnUser()
    })

    return { user, docs, returnUser }
  }
}
</script>

<style>

</style>

补充说明 #

如果你的getUser返回的user是ref对象，需要加.value读取值，原代码未加.value也可能是取值失败的原因。

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