React开发中如何从Firestore获取指定用户的资料数据

你的代码目前是直接调用profiledata集合的.get()方法拉取集合下的所有文档数据，后续通过forEach遍历所有返回的文档存入state，最终把全部3条用户资料渲染到页面。
这里有个核心认知偏差：forEach只是对已经查询到的结果做遍历操作，并不是它导致返回全部数据。只要你的查询范围是整个集合，不管用什么遍历逻辑，都会拿到全部用户的资料。问题本质是查询粒度太粗，直接拉取了整个集合，没有加过滤条件定位到指定用户的文档。

1. 最常用方案：通过关联的文档ID直接查询单用户数据 #

绝大多数Firebase项目的设计逻辑是：profiledata集合下的文档ID，直接和Firebase Auth的用户UID保持一致。这种场景下不需要遍历整个集合，直接通过文档ID查询即可：

• 先从Firebase Auth拿到当前登录用户的UID
• 把原来的集合级查询改成单文档查询，不要拉取整个集合

修改后的核心代码片段：

componentDidMount(){
  // 获取当前登录态的用户信息
  const currentLoginUser = firebase.auth().currentUser;
  // 未登录时直接中止查询
  if (!currentLoginUser) return;

  // 直接查询和用户UID绑定的单条用户资料文档
  firestore.collection('profiledata')
    .doc(currentLoginUser.uid)
    .get()
    .then((docSnapshot) => {
      // 判断目标文档是否存在
      if (docSnapshot.exists()) {
        // 单文档查询无需遍历集合快照，直接取文档数据存入state即可
        this.setState({ profiledata: [docSnapshot.data()] })
      }
    })
}

注意：你之前代码里注释掉的硬编码.doc("JgT2LyOB4jqhMv9YMgrh")方式，只能适合本地测试使用，正式环境绝对不能写死文档ID，必须动态获取当前登录用户对应的文档ID，才能保证不同用户打开个人中心时只拉取自己的资料。

2. 特殊场景：文档ID和用户UID不匹配时的条件查询 #

如果你的profiledata集合文档ID不是Auth的UID，而是文档内部存了userid字段做关联，那就需要用条件过滤的方式，只拉取匹配当前用户ID的文档，避免全量拉取集合：

componentDidMount(){
  const currentLoginUser = firebase.auth().currentUser;
  if (!currentLoginUser) return;

  firestore.collection('profiledata')
    // 只返回文档中userid字段等于当前登录用户ID的结果
    .where('userid', '==', currentLoginUser.uid)
    .get()
    .then((snapshot) => {
      const profiledata = []
      // 此时快照里只有符合条件的单条文档，遍历不会拿到其他用户的数据
      snapshot.forEach((doc) => {
        profiledata.push(doc.data())
      })
      this.setState({ profiledata: profiledata })
    })
}

• 配置完查询逻辑后，一定要同步修改Firestore的安全规则，保证普通用户只能读取自己对应的资料文档，从权限层面避免用户越权拉取整个集合的全量数据。
• 不要再用硬编码的文档ID做正式环境的查询，每个用户的文档ID必须和登录态动态关联，否则会出现所有用户打开页面都看到同一个人资料的问题。

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