Vue方法获取的Firestore数据无法传递给子组件prop问题咨询

这种写法无法正常为prop传递数据，自然也不存在生效后的响应性问题。

写法失效的核心原因 #

• 你的userName方法没有同步返回值：Firestore的get()是异步Promise操作，你在.then()回调里返回的用户名只会被Promise内部接收，不会作为userName方法的返回值传给prop，实际渲染时prop拿到的永远是undefined。
• Vue模板渲染是同步执行流程：渲染阶段触发异步请求时，当前轮渲染已经完成，等异步请求返回结果时，没有任何触发prop更新的机制，视图不会自动刷新。
• 存在严重性能隐患：就算强行绕过返回值问题让逻辑跑通，每次组件重渲染都会重复触发Firestore请求，会产生大量冗余数据库调用，很快耗尽请求配额。

正确实现方案 #

你需要在父组件提前拉取所有帖子对应的用户名，存入响应式数据后再传给子组件prop，参考实现如下：

父组件修正代码 #

<template>
  <post-card
    v-for="post in posts"
    :key="post.id"
    :userId="post.userId"
    :userName="userNameMap[post.userId]"
  />
</template>

<script>
import PostCard from './PostCard.vue'
export default {
  components: { PostCard },
  data() {
    return {
      posts: [], // 原有的帖子列表数据
      userNameMap: {} // 存储用户ID与用户名的映射关系，为响应式对象
    }
  },
  watch: {
    posts: {
      immediate: true,
      handler(newPostList) {
        // 对用户ID去重，避免重复请求同一个用户数据
        const uniqueUserIds = [...new Set(newPostList.map(post => post.userId))]
        uniqueUserIds.forEach(userId => {
          // 已经拉取过的用户跳过重复请求
          if (this.userNameMap[userId]) return
          this.$fire.firestore.collection('users').doc(userId).get().then(snapshot => {
            // Vue2环境下用$set新增对象属性，保证属性具备响应性
            this.$set(this.userNameMap, userId, snapshot.data().name)
          })
        })
      }
    }
  }
}
</script>

子组件无需调整原有props定义即可正常接收数据。

响应性说明 #

按照上述方案实现后，传递给子组件的userNameprop是具备响应性的：

• 当Firestore异步请求返回、userNameMap中对应用户名被赋值时，Vue会检测到响应式数据变化，自动更新子组件接收到的prop值，触发子组件视图重渲染展示最新用户名。
• Vue3环境下无需使用$set，直接给userNameMap赋值即可保证响应性。

内容的提问来源于stack exchange，提问作者Teoman Kirac