Vue+Firebase开发用户资料页遇TypeError:无法读取null的uid属性求助

错误原因 #

问题的核心在于组件setup阶段同步执行时，Firebase Auth的currentUser尚未完成初始化。虽然控制台最终显示用户已登录，但这是onAuthStateChanged回调触发后的异步结果——组件初始化时user.value仍为null，直接访问user.value.uid自然会抛出类型错误。

解决方案 #

需要通过Vue的响应式监听，等待用户状态就绪后再请求对应Firestore数据。同时修复模板中的语法错误，以下是具体实现：

1. 优化getCollection支持动态查询 #

修改getCollection.js，使其能响应查询条件的变化：

import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getCollection = (collection, queryFn) => {
  const documents = ref(null)
  const error = ref(null)

  let collectionRef = projectFirestore.collection(collection).orderBy('createdAt')
  let unsub = null

  watchEffect(() => {
    // 动态生成查询条件
    if (queryFn) {
      collectionRef = queryFn(projectFirestore.collection(collection).orderBy('createdAt'))
    }

    // 取消之前的订阅，避免内存泄漏
    if (unsub) unsub()

    unsub = collectionRef.onSnapshot(snap => {
      let results = []
      snap.docs.forEach(doc => {
        doc.data().createdAt && results.push({...doc.data(), id: doc.id})
      });
      documents.value = results
      error.value = null
    }, err => {
      console.log(err.message)
      documents.value = null
      error.value = 'could not fetch the data'
    })
  })

  return { error, documents }
}

export default getCollection

2. 调整组件逻辑，监听用户状态 #

修改资料页面的脚本与模板，修复变量冲突和标签闭合问题：

<script>
import getCollection from '../Composables/getCollection';
import getUser from '../Composables/getUser';

export default{
  setup() {
    const { user } = getUser()
    // 传入动态查询函数，仅当user存在时过滤数据
    const { documents: Profile, error } = getCollection('Premium', (ref) => {
      return user.value ? ref.where('userId', '==', user.value.uid) : ref
    })

    return { Profile, error }
  }
}
</script>

<template>
<br><br>
<div v-if="error">{{ error }}</div>

<div v-if="Profile" class="Profile">
  <p class="text-5xl text-red-700 font-serif">Your Profile Statistics</p>
  <!-- 修复变量名冲突，避免与导入的Premium重名 -->
  <div v-for="profileItem in Profile" :key="profileItem.id">
    <p class="text-5xl text-red-700 font-serif">{{ profileItem.name }}</p>
    <br><br>
  </div>
</div>
</template>

关键说明 #

• 利用watchEffect监听user的变化，确保只有在用户对象就绪后才执行Firestore查询
• 优化后的getCollection会自动处理订阅的取消与重建，避免内存泄漏
• 修复模板中的变量名冲突和未闭合标签问题，确保渲染正常

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