$ Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup - Quasar 2, Firebase 9 Authentication, Vue.js 3, JavaScript

目标: 刷新时使用用户列表呈现页面。

问题: 刷新时,页面在页面呈现之前不会从 Firebase 捕获用户 ID。

错误: 无法读取 null 的属性(读取 'uid')

如何在页面加载到 DOM 之前从 Firebase 获取用户 ID?它在初始导航到列表页面时工作正常,但是,当我按下刷新时,它会出现上述错误。我需要“uid”来刷新项目列表。这是我的代码的简化版本,我在下面尝试过。

List.vue

...
    ////////// The following line causes error //////////
const itemsRef = collection(db, 'users/' + auth.currentUser.uid + '/items')

onSnapshot(itemsRef, snapshot => {
    let results = []
    snapshot.docs.forEach(doc => {
        results.push({ ...doc.data(), id: doc.id })
      })
    items.value = results
})
...

我试过了:

List.vue

...
onAuthStateChanged(auth, ( user ) => {
  if (user) {
    const user = auth.currentUser
    const uid = user.uid

    ////////// The following line causes error //////////
    const itemsRef = collection(db, 'users/' + uid + '/items')

    onSnapshot(itemsRef, snapshot => {
      let results = []
      snapshot.docs.forEach(doc => {
        results.push({ ...doc.data(), id: doc.id })
      })
      items.value = results
    })
  }
})
...

我仍然得到同样的错误:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup

完全简化的 List.vue

<template>

  <q-page padding>
    <p>LIST</p>
    <q-list
      v-if="user"
      bordered
      separator
      v-for="item in items"
      :key="item.id"
    >
      <q-item>
        <q-item-section>
          <div class="column">
            <q-item-label
            >{{ item.name }}
            </q-item-label>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
    <q-list v-show="!uid"> Loading ...</q-list>
  </q-page>
</template>

<script>
import { ref } from 'vue'
import { auth, db } from 'src/boot/firebase'
import { collection, onSnapshot } from 'firebase/firestore'
import { onAuthStateChanged } from "firebase/auth"

export default {
  name: "List",
  setup() {
    const user = ref(auth.currentUser)
    const uid = ref(user.value.uid)
    const item = ref({})
    const name = ref('')
    const items = ref([])
    const id = ref(item.id)
    onAuthStateChanged(auth, ( user ) => {
      if (user) {
        user.value = auth.currentUser
        console.log('user.value: ', user.value)
        const uid = user.value.uid
        console.log('uid:', uid)
        console.log('uid.value:',uid.value)

        //    GET ITEMS LIST FROM FIRESTORE
        console.log('BEFORE ITEMS REF')
        const itemsRef = collection(db, 'users/' + uid + '/items')
        console.log('itemsRef: ', itemsRef)
        onSnapshot(itemsRef, snapshot => {
          let results = []
          snapshot.docs.forEach(doc => {
            results.push({ ...doc.data(), id: doc.id })
          })
//      UPDATE VALUES
          items.value = results
        })
      }
    })
//
    return {
      item,
      name,
      items,
      user,
      uid,
      id
    }
  }
}
</script>
stack overflow $ Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup - Quasar 2, Firebase 9 Authentication, Vue.js 3, JavaScript
原文答案

答案:

作者头像

哎呀! 😳 感谢 Sy3d 我找到了答案

How to mount quasar app to dom after firebase connection is initialized?

src/boot/auth.js

import { auth } from 'src/boot/firebase'

export default async ({ app, router, store }) => {
    return new Promise(resolve => {
        const unsubscribe = authService.onAuthStateChanged(() => {
            resolve()
            unsubscribe()
        })
    })
}

相关问题