React Native中如何在Firestore FlatList中整合两个集合（用户+帖子）的数据

Hey there! Let's work through this issue you're facing with Firestore and FlatList in React Native. You want your Feed screen to show posts along with the corresponding user's name and avatar from the users collection, right? Here are two practical approaches to make this happen:

This approach fetches the corresponding user data for each post as you load the posts. It keeps your data in sync if users update their name or avatar later.

修改Feed.js的代码： #

The key change here is using Promise.all to handle the asynchronous user document queries for each post. Also, don't forget to clean up the Firestore subscription to avoid memory leaks!

useEffect(() => {
  // 订阅posts集合的实时更新
  const subscriber = firebase.firestore()
    .collection('posts')
    .orderBy('timestamp', 'desc') // 按时间倒序排列，符合Feed的逻辑
    .onSnapshot(async (querySnapshot) => {
      // 遍历所有post文档，并行查询对应的用户数据
      const postsWithUserInfo = await Promise.all(
        querySnapshot.docs.map(async (doc) => {
          const postData = doc.data();
          
          // 根据post里的uid查询用户文档
          const userDoc = await firebase.firestore()
            .collection('users')
            .doc(postData.uid)
            .get();

          if (userDoc.exists) {
            const userData = userDoc.data();
            return {
              key: doc.id,
              text: postData.text,
              timestamp: postData.timestamp,
              image: { uri: postData.image },
              // 从users集合获取的用户信息
              name: userData.name,
              avatar: { uri: userData.avatar }
            };
          } else {
            // 处理用户不存在的情况，返回默认值
            return {
              key: doc.id,
              text: postData.text,
              timestamp: postData.timestamp,
              image: { uri: postData.image },
              name: 'Unknown User',
              avatar: { uri: 'https://example.com/default-avatar.png' } // 替换成你的默认头像地址
            };
          }
        })
      );

      setUsers(postsWithUserInfo);
      setLoading(false);
    });

  // 组件卸载时取消订阅
  return () => subscriber();
}, []);

这个方案的优缺点： #

• ✅ 优点：如果用户更新了他们的name或avatar，Feed里的内容会自动同步更新
• ❌ 缺点：每个post都会触发一次额外的Firestore读取，可能增加读取次数和加载时间（适合用户信息经常变动的场景）

This is a common pattern in NoSQL databases like Firestore—we duplicate some user data into the posts collection when a post is created. This optimizes read performance since you only need to query the posts collection once.

第一步：修改Fire.js的addPost方法 #

We'll fetch the current user's name and avatar before adding the post, then include that data in the post document:

addPost = async ({text, localUri}) => { 
  const remoteUri = await this.uploadPhotoAsync(localUri, `photos/${this.uid}/${Date.now()}`);
  
  // 获取当前用户的文档数据
  const userDoc = await firebase.firestore().collection("users").doc(this.uid).get();
  if (!userDoc.exists) {
    throw new Error("Could not find user data");
  }
  const { name, avatar } = userDoc.data();

  return new Promise((res, rej) => { 
    this.firestore.collection("posts") 
      .add({ 
        text, 
        uid: this.uid, 
        timestamp: this.timestamp, 
        image: remoteUri, 
        name: name, // 把用户名存入post
        avatar: avatar // 把用户头像存入post
      }) 
      .then(ref => { 
        res(ref); 
      }) 
      .catch(error => { 
        rej(error); 
      }); 
  }); 
};

第二步：修改Feed.js的代码 #

Now you can directly access the user's name and avatar from the post data, no extra queries needed:

useEffect(() => { 
  const subscriber = firebase.firestore() 
    .collection('posts')
    .orderBy('timestamp', 'desc')
    .onSnapshot(querySnapshot => { 
      const posts = []; 
      querySnapshot.forEach(doc => { 
        const postData = doc.data();
        posts.push({ 
          key: doc.id, 
          name: postData.name, 
          text: postData.text, 
          timestamp: postData.timestamp, 
          avatar: { uri: postData.avatar }, 
          image: { uri: postData.image } 
        }); 
      }); 
      setUsers(posts); 
      setLoading(false); 
    }); 

  // 组件卸载时取消订阅
  return () => subscriber();
}, []);

这个方案的优缺点： #

• ✅ 优点：只需要一次Firestore查询，加载速度更快，适合用户信息不经常变动的场景
• ❌ 缺点：如果用户更新了他们的name或avatar，旧帖子不会自动更新。 You'd need to write additional code to update all existing posts for that user if you want consistency.

为什么你之前的代码报错？ #

In your original addPost method, this line only gets a reference to the users collection—not the actual user document:

// const user = await firebase.firestore().collection("users")

You need to target the specific user document with .doc(this.uid) and call .get() to fetch the data, which is what we did in the second solution.

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