我正在开发一个 vuejs / (vuex) 用于帖子的状态管理/firebase 项目。

所以我有一个 firestore 帖子集合（具有名称 id 所有者内容和创建时间戳的对象数组...），当用户想要访问单个帖子时，它会将他重定向到单个帖子的路线（..../view-post/postid）。

所有帖子均使用 getDocs 方法从 firestore 中检索，并将其存储在 blogPosts 变量中...

我正在使用一个数据及其数组，当已安装的生命周期钩子启动时称为 currentBlog: null （当组件已安装时）我使用该数组并通过将所有帖子过滤到帖子 id，然后开始使用数组[0] 填充组件上的数据，如下所示：

async mounted() {
    this.currentBlog = await this.blogPosts.filter((post) => {
                    return post.blogID == this.$route.params.blogid;
                });
}

我的 html 标记（模板）：

<section class="preview" v-if="currentBlog">
        <h2>{{ currentBlog[0].blogTitle }}</h2>
        <p>Posted on: <span>{{ dateFormat() }}</span> <span v-if="currentBlog[0].editTime">(Last edit:
                {{ editFormat() }})</span></p>
        <img class="blogCover" :src="currentBlog[0].blogCoverFileURL" :alt="currentBlog[0].blogCoverPhoto">
        <div class="html-blog" v-html="currentBlog[0].blogHTML"></div>
        <hr />
        <div class="tags">
            <h4>Tags:</h4>
            <div class="tag" v-for="(tag,index) in currentBlog[0].blogTags" @click="filterPosts(tag)" :key="index">
                {{ tag }}
            </div>
        </div>
        <hr />
</section>

我使用第一个条件只是为了确保帖子在过滤完成时出现，但是……

现在我收到了帖子，我遇到的问题是当我从帖子刷新页面时，有时当我直接打开帖子时，会出现此错误：

Uncaught (in promise) TypeError: this.currentBlog[0] is undefined

有什么方法可以解决这些问题，甚至有任何建议的其他方法吗？