Данные отображаются на экране, но с ошибкой на консоли (Firebase с Vue): не перехвачено (в обещании) TypeError: невозможно прочитать «содержимое» свойства, равное нулю

Я пытаюсь отобразить урок. содержание на экране, но у меня есть ошибки на консоли. Вот код (я использую Firebase с 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>

Тогда у меня такая ошибка:

Что меня смущает, так это то, что я все еще могу отобразить урок. содержание на экране:

Я несколько часов пытался это исправить, но не мог понять, почему. Буду очень признателен за вашу помощь. Спасибо!

Мой код getDocument.js:

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.info(err.message)
    error.value = 'problem fetching the document'
  })

  watchEffect((onInvalidate) => {
    onInvalidate(() => unsub())
  });

  return { error, document }

}

export default getDocument