React Native中FlatList无法渲染Firebase获取的对象数组问题

你的核心问题是forEach循环里的异步操作没被正确等待：当你调用setChats(chatList)时，所有获取用户名的异步请求还没完成，此时chatList是空数组。虽然之后异步请求完成会给数组追加元素，但React不会因为数组内容的后续变化重新渲染——因为状态只在初始空数组时更新过一次。而去掉await时，异步请求还没拿到数据就执行了push，所以freind属性自然是undefined。

解决方案：用Promise.all等待所有异步请求完成 #

改用Promise.all统一处理所有获取用户名的异步操作，确保拿到完整数据后再更新状态，具体修改如下：

const Chat = () => {
  const { currentUser } = useAuth();
  const [chats, setChats] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const chatListQuery = firestore()
      .collection('chatRoom')
      .where('members', 'array-contains', currentUser.uid)
      .where('group', '==', false)
      .orderBy('recentMessage.sendAt', 'desc');
    
    const unsubscribe = chatListQuery.onSnapshot(async (querySnapShot) => {
      // 用map生成每个聊天项的异步请求Promise
      const chatPromises = querySnapShot.docs.map(async (item) => {
        const chatData = item.data();
        // 过滤出当前用户的好友ID
        const friendId = chatData.members.filter(member => member !== currentUser.uid)[0];
        // 获取好友用户名
        const userSnapshot = await firestore().collection('users').doc(friendId).get();
        const friendName = userSnapshot.data()?.name || '未知用户';
        
        // 返回组装好的聊天数据
        return { ...chatData, id: item.id, friend: friendName };
      });

      // 等待所有异步请求完成，拿到完整的聊天列表
      const chatList = await Promise.all(chatPromises);
      
      setLoading(false);
      setChats(chatList);
    });

    return () => unsubscribe();
  }, [currentUser.uid]) // 添加依赖，避免闭包导致的旧值问题

  return (
    <View>
      {loading ? (
        <Text>Loading...</Text>
      ) : (
        <FlatList 
          data={chats} 
          renderItem={({ item }) => <Text>{item.friend}</Text>} 
          keyExtractor={item => item.id} 
        />
      )}
    </View>
  )
}

export default Chat;

关键修改说明 #

1. 替换forEach为map：forEach不会处理异步函数的返回值，map会把每个异步操作包装成Promise并返回数组，供Promise.all使用。
2. 用Promise.all等待所有请求：确保所有用户名都获取完成后，再更新chats状态，此时数组是完整且可被FlatList正常遍历的。
3. 简化数据组装逻辑：去掉冗余的temp数组，直接获取好友名字并赋值，同时添加可选链?.避免用户文档不存在时的报错。
4. 补充useEffect依赖：将currentUser.uid加入依赖数组，防止闭包导致的用户ID过期问题。

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