title: $ Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup - Quasar 2, Firebase 9 Authentication, Vue.js 3, JavaScript
body: <p>I don't have enough for putting a bounty, but I may send a $donation$ to whoever helps me answer this!</p>
  <p><strong>GOAL:</strong> Render page with user's list on refresh.</p>
  <p><strong>PROBLEM:</strong> On refresh, the page does not catch the user id from Firebase before the page renders.</p>
  <p><strong>ERROR:</strong> Cannot read properties of null (reading 'uid')</p>
  <p>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.</p>
  <p><strong>List.vue</strong></p>
  <pre><code>...
      ////////// The following line causes error //////////
  const itemsRef = collection(db, 'users/' + auth.currentUser.uid + '/items')
  
  onSnapshot(itemsRef, snapshot =&gt; {
      let results = []
      snapshot.docs.forEach(doc =&gt; {
          results.push({ ...doc.data(), id: doc.id })
        })
      items.value = results
  })
  ...
  </code></pre>
  <p>I tried:</p>
  <p><strong>List.vue</strong></p>
  <pre><code>...
  onAuthStateChanged(auth, ( user ) =&gt; {
    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 =&gt; {
        let results = []
        snapshot.docs.forEach(doc =&gt; {
          results.push({ ...doc.data(), id: doc.id })
        })
        items.value = results
      })
    }
  })
  ...
  </code></pre>
  <p>I still get the same error:</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid') at setup</p>
  </blockquote>
  <p>Full simplified <strong>List.vue</strong></p>
  <pre><code>&lt;template&gt;
  
    &lt;q-page padding&gt;
      &lt;p&gt;LIST&lt;/p&gt;
      &lt;q-list
        v-if=&quot;user&quot;
        bordered
        separator
        v-for=&quot;item in items&quot;
        :key=&quot;item.id&quot;
      &gt;
        &lt;q-item&gt;
          &lt;q-item-section&gt;
            &lt;div class=&quot;column&quot;&gt;
              &lt;q-item-label
              &gt;{{ item.name }}
              &lt;/q-item-label&gt;
            &lt;/div&gt;
          &lt;/q-item-section&gt;
        &lt;/q-item&gt;
      &lt;/q-list&gt;
      &lt;q-list v-show=&quot;!uid&quot;&gt; Loading ...&lt;/q-list&gt;
    &lt;/q-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref } from 'vue'
  import { auth, db } from 'src/boot/firebase'
  import { collection, onSnapshot } from 'firebase/firestore'
  import { onAuthStateChanged } from &quot;firebase/auth&quot;
  
  export default {
    name: &quot;List&quot;,
    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 ) =&gt; {
        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 =&gt; {
            let results = []
            snapshot.docs.forEach(doc =&gt; {
              results.push({ ...doc.data(), id: doc.id })
            })
  //      UPDATE VALUES
            items.value = results
          })
        }
      })
  //
      return {
        item,
        name,
        items,
        user,
        uid,
        id
      }
    }
  }
  &lt;/script&gt;
  </code></pre>