Javascript Firestore:无法获取嵌套文档。为什么？

我正在使用Vue（使用Vuex）应用程序，使用firebase/firestore后端，在获取其他文档引用的文档时遇到问题。具体来说，我有一个

recipes

集合（以及链接照片中看到的

用户

和

评论

集合），其中包含的每个文档都有

由

添加的字段和

评论

字段。两者都是引用的各个文档的

id

字符串（注释字段是

id

s的数组）。现在，我不确定这是否是最好的方法，但从MongoDB的背景来看，我认为可以像我们使用MongoDB一样获取这些字段的详细信息

我试了几次，但似乎都不管用。下面的代码片段就是一个例子

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

DB中没有这样的配方
评论
从“vuex”导入{MapGetter，mapActions}；
从“@/components/shared/Loader”导入加载程序；
从“@/components/recipes/detail/PostedBy”导入PostedBy；
从“@/components/forms/CommentForm”导入CommentForm；
从“@/components/recipes/detail/CommentList”导入CommentList；
导出默认值{
名称：“配方详情”，
组成部分：{
装载机，
发信人：，
评论形式，
评论列表，
},
数据（）{
返回{
recipeId:this.$route.params.recipeId，
完整路径：此。$route.fullPath
};
},
计算：{
…映射获取程序（[“isLoading”]），
…映射器（{recipe:“recipes/recipe”}），
},
观察：{
“$route.params.recipeId”（id）{
this.recipeId=id；
}
},
方法：{
…映射操作（{getRecipeById:“recipes/getRecipeById”}）
},
创建（）{
如果（！this.recipe | | this.recipe.id！==this.recipeId）{
this.getRecipeById（this.recipeId）；
}
}
};

评论列表组件（这里，我通过道具接收评论id列表）

第一个对菜谱发表评论
从“/Comment”导入注释；
导出默认值{
名称：“评论列表”，
组成部分：{
议论
},
道具：{
评论列表：{
类型：数组，
必填项：true
}
}
};

评论组件

<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>

PS：我觉得没有必要包含Vuex方法（操作）来减少冗长。它们在发送相应的查询时工作正常。
看起来您在所有组件之间共享了一个
isLoading
标志

我相信发生的事情是这样的：

您尝试加载注释，
isLoading
设置为
true
组件
配方详细信息
重新呈现以显示
加载配方
消息。请注意，这将破坏
注释列表
当注释完成加载时，
isLoading
将被设置回
false
recipe details
将再次重新呈现，这次将显示
注释列表
。这将创建一组新的
comment
组件，每个组件将再次尝试加载其数据。这让我们回到第一步
另一方面，您的
注释
组件似乎依赖于存储中保存的单个注释。如果只有一条评论，这可能没问题，但是如果有多条评论，它们将同时加载，并且最终只有一条评论会出现在商店中。
您的假设是正确的。例如，当用户添加新注释时，recipe detail组件会重新呈现，出于明显的原因，这是我不想要的行为。在我找到当前问题的解决方案后，我正计划调查此事。@CollinsOrlando从你的评论中，我不清楚你是否理解我的答案。共享
isLoading
标志是导致您当前问题的原因。哦，我可能误解了您的评论。不管怎样，我找到了另一个解决方案，但您的建议是：isLoading标志导致除此之外的其他问题仍然是非常宝贵的。谢谢你的帮助，我会接受你的回答。干杯
<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>