React Native setState异步数组问题：Firestore加载数据后无法正确赋值

问题根源 #

你用map遍历chatIds时，传入的async回调函数会返回Promise对象，所以newMessageArray本质是一组未解析的Promise，而非实际的消息数据。你看到的{"_A": null, "_x": 0, "_y": 0, "_z": null}就是Promise对象的内部结构。

修复代码 #

async function loadMessages() {
  // 用Promise.all等待所有异步请求完成，解析出实际数据数组
  const newMessageArray = await Promise.all(chatIds.map(async chat => {
    const q = query(
      collection(db, collections.messages),
      where('chatId', '==', chat.id),
      orderBy("createdAt", 'desc'),
      limit(1)
    );

    const querySnapshot = await getDocs(q);
    // 处理无消息的边界情况，避免报错
    return querySnapshot.docs[0]?.data() || null;
  }));
  
  console.log(newMessageArray);
  setMessages(newMessageArray);
}

关键改动说明 #

• 把loadMessages声明为async函数，允许内部使用await
• 用Promise.all()包裹map的结果，等待所有Firestore查询完成，将Promise数组转换成实际的消息数据数组
• 移除了冗余的.then()嵌套，直接用await处理getDocs返回的Promise，代码更直观
• 添加?.可选链和|| null默认值，防止某个聊天ID没有对应消息时，因querySnapshot.docs[0]不存在而抛出错误

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