无法从 VueJs 中的 firestore 文档中检索 lastName 和 firstName

Question

I am trying to display last Name and first Name from a document stored upon signup with a field displayName. I thought that having a displayName as a common key would allow me to retrieve last name and first name of the user signing up by making a request to firestore using the displayName property stored in the currentUser object that is returned once I have logged in. However, I cannot access the lastName from the firebase documents and would really appreciate help.

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

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

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

    watch(()=> user, () => returnUser())

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

    const returnUser = async () => {
      const res = await projectFirestore
        .collection("users")
        .where("displayName", "==", "Abe")
        .get();
      if (!error.value) {
        // check your response here.
        console.log(res);
        const doc = res.filter((userObj) => {
          if ("Abe" === userObj.data().displayName) {
            return userObj.data().lastName;
          }
        });
        docs.value = doc;
      }
    };

    onMounted(returnUser)

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

There's only a blank array being returned in place of the lastName. I also don't see any requests made by firebase to retrieve the information needed. I get a reference error:error is undefined in my console as well as cannot read property displayName of null despite using a watch to make sure that the user object is uploaded after. Can someone please help with major code changes to help me get through my errors and display the lastname from firebase. Please help. I am new to Vuejs.

import { ref } from 'vue'
import { projectAuth } from '../firebase/config'

// refs
const user = ref(projectAuth.currentUser)

// auth changes
projectAuth.onAuthStateChanged(_user => {
  console.log('User state change. Current user is:', _user)
  user.value = _user
});

const getUser = () => {
  return { user } 
}

export default getUser

Answer 1

If you want to log all firstName + lastName combinations then try this:

const returnUser = async () => {
  const res = await projectFirestore
    .collection("users")
    .where("displayName", "==", "Abe") // Case sensitive
    .get();

  const lastNameList = res.docs.map(d => `Abe ${d.data().lastName}`)
  console.log(lastNameList)
  docs.value = lastNameList;
}

Try changing the getUser function like this so displayName is always defined.

const getUser = () => {
  // set default value to null
  return user ? { user } : { displayName: "NoUser" } 
}