Javascript Vue生命周期和firebase：为什么我得到；TypeError:无法读取属性'；url'；是否为空；？

我正在为一个问题挣扎。我在模板中得到了如下图像元素：

<img :src="photo.url" :id="photo.filename" :alt="photo.title" v-if="photo.url" />

我有一种方法可以获取img元素的数据，如下所示：

async mounted() {
    // get photo properties
    await this.getPhotoDoc()
    // initialize Annotorious and assign to 'anno' variable for use throughtout component
    this.anno = await new Annotorious({ image: this.photo.filename })

以下是我的照片文档制作方法：

    async getPhotoDoc() {
      try {
        const docRef = await photosCollection
          .doc(this.$route.params.id) // to be dynamic
          .get()
        if (docRef.exists) {
          // data() returns all data about the doc
          let photo = await docRef.data()
          this.photo = photo
        } else {
          console.log('no docs exist for this photo')
        }
      } catch (error) {
        console.log('Error getting document:', error)
      }
    }

我似乎无法在控制台中消除此错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'url' of null"
found in
---> <PhotoDetail>
       <App> at src/App.vue
         <Root>

[Vue warn]：呈现中出错：“TypeError:无法读取null的属性“url”
发现于
---> 
在src/App.vue

---

任何一个点我可以调整吗？

因为photo是异步初始化的，所以生命周期中有一个点，

photo

是未定义的。OP中的v-if不是针对这种情况的适当检查。把它改成

v-if="photo && photo.url"

所以我这样做了，它“起作用了”：

但是，由于某种原因，它不喜欢

:id

部分的文档id，所以我不得不使用

照片.filename

。不知道为什么。但是，我现在可以用它。。。

v-if="photo && photo.url"