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

Question

I don't have enough for putting a bounty, but I may send a $donation$ to whoever helps me answer this!

GOAL: Render page with user's list on refresh.

PROBLEM: On refresh, the page does not catch the user id from Firebase before the page renders.

ERROR: Cannot read properties of null (reading 'uid')

How can I get the user ID from firebase before the page loads to the DOM? It works fine on initial navigation to the List Page, however, when I press refresh it gives the above error. I need the 'uid' to refresh the list of items. This is a simplified version of my code and something I tried below.

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
})
...

I tried:

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
    })
  }
})
...

I still get the same error:

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

Full simplified 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>

Answer 1

Ok, so I ended up just changing the path for 'items'. Instead of having 'items' as a sub-collection of 'users' (which was dependent on having the 'uid' in the path), I made 'items' a root collection with the 'uid' as a field. So, this:

    const itemsRef = collection(db, 'users/' + uid + '/items')

is now this:

        const itemsRef = collection(db, 'items')

Answer 2

OMHeck! I found the answer thanks to 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()
        })
    })
}