javascript - Firestore : Unable to fetch nested documents. 为什么？

Question

我正在开发一个带有 firebase/firestore 后端的 Vue(带有 Vuex)应用程序，并且在获取其他文档引用的文档时遇到问题。具体来说，我有一个recipes集合(连同users和comments集合，如链接照片中所示)集合，每个包含的文档都有，其中包括 addedBy 和 comments 字段。两者都是所引用文档的 id 字符串(注释字段是 id 数组)。现在，我不确定这是否是最好的方法，但来自 MongoDB 背景，我认为可以像我们使用 MongoDB 一样获取这些字段的详细信息。

我尝试过几次，但似乎没有什么效果。下面的代码片段中可以看到这样的示例。

主配方组件/容器(我在数据库中查询特定配方文档)

<template>
  <div class="recipe-detail">
    <loader v-if="isLoading" message="Loading Recipe" size="huge" />
    <div v-else-if="!recipe" class="no-recipe">
      No such recipe in DB
    </div>
    <div v-else class="comments-and-similar">
      <div class="comments">
        <h3 class="comments-title">Comments</h3>
        <comment-form />
        <comment-list :comment-list="recipe.comments" />
      </div>
      <div class="similar-recipes">
        <similar-recipes />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

import Loader from "@/components/shared/Loader";
import PostedBy from "@/components/recipes/detail/PostedBy";
import CommentForm from "@/components/forms/CommentForm";
import CommentList from "@/components/recipes/detail/CommentList";

export default {
  name: "recipe-detail",
  components: {
    Loader,
    PostedBy,
    CommentForm,
    CommentList,
  },
  data() {
    return {
      recipeId: this.$route.params.recipeId,
      fullPath: this.$route.fullPath
    };
  },
  computed: {
    ...mapGetters(["isLoading"]),
    ...mapGetters({ recipe: "recipes/recipe" }),
  },
  watch: {
    "$route.params.recipeId"(id) {
      this.recipeId = id;
    }
  },
  methods: {
    ...mapActions({ getRecipeById: "recipes/getRecipeById" })
  },
  created() {
    if (!this.recipe || this.recipe.id !== this.recipeId) {
      this.getRecipeById(this.recipeId);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

评论列表组件(这里，我通过 props 接收评论 id 列表)

<template>
  <section class="comments">
    <div v-if="commentList.length === 0">Be the first to comment on recipe</div>
    <template v-else v-for="comment in commentList">
      <comment :comment-id="comment" :key="comment" />
    </template>
  </section>
</template>

<script>
import Comment from "./Comment";

export default {
  name: "comment-list",
  components: {
    Comment
  },
  props: {
    commentList: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

评论组件

<template>
  <article>
    <div v-if="isLoading">Loading comment...</div>
    <div v-else>{{ JSON.stringify(comment) }}</div>
  </article>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "comment",
  props: {
    commentId: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters(["isLoading"]),
    ...mapGetters({ comment: "recipes/comment" })
  },
  methods: {
    ...mapActions({ getCommentById: "recipes/getCommentById" })
  },
  created() {
    this.getCommentById(this.commentId);
  }
};
</script>

现在，Comment 组件是我遇到麻烦的地方。我获取每个单独的评论 ID 并使用它来查询数据库，特别是 comments 集合。我实际上从数据库获取了评论详细信息正文，此查询不会停止并导致无限循环。我必须注释掉 created 生命周期中的方法才能停止。我尝试使用相同的方法来添加 By 字段来查询用户，但遇到了同样的问题。所以，我做错了什么。

数据库结构

PS:我认为没有必要包含 Vuex 方法(操作)以减少冗长。它们可以很好地发送相应的查询。

Answer 1

看起来您正在所有组件之间共享一个 isLoading 标志。

我相信正在发生的事情是这样的:

1. 您尝试加载评论，并且 isLoading 设置为 true。
2. 组件recipe-detail重新渲染以显示Loading Recipe消息。请注意，这将破坏comment-list。
3. 当评论加载完成后，isLoading 将被设置回 false。
4. recipe-details 将再次重新渲染，这次显示 comment-list。这将创建一组新的 comment 组件，每个组件都会尝试再次加载其数据。这会让我们回到第 1 步。

在一个不相关的注释中，您的评论组件似乎依赖于商店中保存的单个评论。当只有一条评论时，这可能没问题，但当有多个评论时，它们会同时加载，并且只有其中一条最终会出现在商店中。