I am currently working on developing a user profile edit page that redirects users to their unique profile after logging in. However, I keep encountering an error that says Uncaught (in promise) TypeError: Cannot read properties of null (reading 'uid'). Despite confirming that the user is logged in and not using asynchronous code, I am puzzled by this issue. It seems like the uid might not be passing through before the function executes. Below is the vue.js script code responsible for displaying the profiles.
<script>
import getCollection from '../Composables/getCollection';
import getUser from '../Composables/getUser';
import getPremium from "../Composables/getPremium.js";
const {Premium, error, load} = getPremium();
load();
export default{
setup() {
const { user } = getUser()
const { documents: Profile } = getCollection(
'Premium',
['userId', '==', user.value.uid]
)
console.log(Profile)
return { Profile }
}
}
</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>
<div v-for =" Premium in Premium" :key="Premium.id">
<p class="text-5xl text-red-700 font-serif">Your Profile Statistics</p>
<p class="text-5xl text-red-700 font-serif">{{ Premium.name }}</p>
<br><br>
</template>
This is where my getUser.js page comes into play.
import { ref } from 'vue'
import { projectAuth } from '../firebase/config'
// refs
const user = ref(projectAuth.currentUser)
// auth changes
projectAuth.onAuthStateChanged(_user => {
console.log('User state change. Current user is:', _user)
user.value = _user
});
const getUser = () => {
return { user }
}
export default getUser
And here is my getCollection.js page.
import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'
const getCollection = (collection, query) => {
const documents = ref(null)
const error = ref(null)
// register the firestore collection reference
let collectionRef = projectFirestore.collection(collection)
.orderBy('createdAt')
if (query) {
collectionRef = collectionRef.where(...query)
}
const unsub = collectionRef.onSnapshot(snap => {
let results = []
snap.docs.forEach(doc => {
// must wait for the server to create the timestamp & send it back
doc.data().createdAt && results.push({...doc.data(), id: doc.id})
});
// update values
documents.value = results
error.value = null
}, err => {
console.log(err.message)
documents.value = null
error.value = 'could not fetch the data'
})
watchEffect((onInvalidate) => {
onInvalidate(() => unsub());
});
return { error, documents }
}
export default getCollection
Despite ruling out any async functions or login issues, I remain stuck with the same error. I have compared my code with examples and even attempted computing functions, but to no avail. Any assistance on resolving this matter would be highly appreciated. Thank you.