未捕获（承诺中）类型错误：在应用程序中使用 firebase 数据时无法读取未定义的属性（读取“displayName”）

Question

我正在使用 firebase 9 和 vue3，并在尝试使用文档中的数据时收到此错误。我 console.log 数据，它显示正确，但它指出它是未定义的。我还确保在尝试使用数据之前已加载数据（如下所示）。

<script setup>
import Navbar from "@/components/navbar.vue";
import { onMounted, ref } from "vue";
import { getAuth, onAuthStateChanged, signOut } from "firebase/auth";
import { useRouter } from "vue-router";
import { doc, getDoc, onSnapshot } from 'firebase/firestore';
import {db} from "@/main.js";

const router = useRouter();
const loggedIn = ref(false);

let user = ref();
let auth;
onMounted(async () => {
  auth = getAuth();
  const docRef = doc(db, 'users', auth.currentUser.uid);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    onSnapshot(docRef, (doc) => {
      console.log(doc.data());
      user = {...doc.data()};
    });
  } else {
    console.log("No document exists");
  }

  onAuthStateChanged(auth, (user) => {
    if (user) {
      loggedIn.value = true;
    } else {
      loggedIn.value = false;
    }
  });
})
const handleSignOut = () => {
  signOut(auth).then(() => {
    router.push("/")
  })
}

</script>

<template>
  <navbar></navbar>
  <p>Account Page</p>

  <div v-if="loggedIn" >Hello, {{user.displayName}}</div>

  <button @click="handleSignOut">Sign Out</button>
</template>

Answer 1

在脚本设置中，我们需要使用

.value

来更改变量的值。 这里分享的代码中，更新用户时，是直接更新，没有

.value

。

if (docSnap.exists()) {
  onSnapshot(docRef, (doc) => {
    console.log(doc.data());
      user.value = {...doc.data()};
    });
  } else {
    console.log("No document exists");
  }