Reputation: 33
I'm trying to get lesson.contents to render on the screen but I have some errors on the console. Here is the code (I'm using Firebase with Vue 3)
<template>
<AddContent :lesson="lesson" />
<div v-if="lesson.contents.length">
<h2>{{ lesson.contents }}</h2>
</div>
</template>
<script>
import ContentList from "@/components/ContentList.vue";
import AddContent from "@/components/AddContent.vue";
import getDocument from "@/composables/getDocument";
import { ref } from "vue";
export default {
props: ["id"],
components: { AddContent },
setup(props) {
const { document: lesson } = getDocument("lessons", props.id);
return { lesson };
},
};
</script>
<style>
</style>
Then I have this error:
What I'm confused is that I'm still able to render lesson.contents on the screen:
I've been trying a few hours trying to fix it but I could not find out why. I'd really appreciate your help. Thank you!
My getDocument.js
code:
import { watchEffect, ref } from 'vue'
import { projectFirestore } from '../firebase/config'
const getDocument = (collection, id) => {
let document = ref(null)
let error = ref(null)
// register the firestore collection reference
let documentRef = projectFirestore.collection(collection).doc(id)
const unsub = documentRef.onSnapshot(doc => {
// need to make sure the doc exists & has data
if(doc.data()) {
document.value = {...doc.data(), id: doc.id}
error.value = null
}
else {
error.value = 'that document does not exist'
}
}, err => {
console.log(err.message)
error.value = 'problem fetching the document'
})
watchEffect((onInvalidate) => {
onInvalidate(() => unsub())
});
return { error, document }
}
export default getDocument
Upvotes: 1
Views: 67
Reputation: 165069
This line...
let document = ref(null)
initialises document
to null
. It is only after the onSnapshot
callback is executed does it receive a value with the contents
property.
To keep your application from throwing...
Cannot read property 'contents' of null
you can initialise document
with a better default
let document = ref({ contents: [] })
Upvotes: 3