projectFirestore 没有在 Vue 的异步函数中返回文档集合？

Question

我正在尝试从 Firebase/Firestore 返回用户集合，但是当我在控制台中检查它时，我拥有的代码没有返回任何内容。你能帮我吗，我是Vue的新手？我正在尝试查找与当前登录的用户具有相同显示名称但我被卡住的用户。

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

<script>
import  getUser  from '@/composables/getUser'
import { ref } 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 () => {
                const res = await projectFirestore.collection('users').get()
                if (!error.value) {
                    console.log(res.docs)
                    const doc = res.docs.filter((user1) =>{
                        if (user1.displayName == user.displayName){
                            return user.lastName
                        }
                    })
                    docs.value = doc
            }
        }

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

<style>

</style>

Answer 1

首先，您在filter 函数上应用的条件需要更改，以免变量混淆。目前，您正在将元素的 displayName 与其自身进行比较，这始终是正确的。

其次，您可以通过简单的查询从集合中查询所需的文档。更多信息可以在here找到。

另外，在跳到下一个结论之前，请检查从firestore 返回的响应。来自firestore 的get() 方法返回一个querySnapshot，因此无需调用res.docs。您将直接在res 中获取您的文档，这将是一个数组。只需对其进行迭代以获取单个文档，然后可以使用 .data() 方法轻松访问其属性

解决方案

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

import getUser from "@/composables/getUser";
import { ref } 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 () => {
      const res = await projectFirestore
        .collection("users")
        .where("displayName", "==", user.displayName)
        .get();
      if (!error.value) {
        // check your response here.
        console.log(res);
        const doc = res.filter((userObj) => {
          if (user.displayName === userObj.data().displayName) {
            return user.lastName;
          }
        });
        docs.value = doc;
      }
    };

     onMounted(returnUser)

    return { user, docs, returnUser };
  },
};