Firebase Promise问题：无法设置React状态，状态数组为空

核心问题拆解 #

1. React State更新是异步的
   调用setChats(chatsArray)后，chats不会立刻同步更新。你在setChats之后立刻console.log(chats)，打印的是更新前的旧state值，这并不代表state没设置成功。

2. Promise链冗余且逻辑分散
   第一个then没有返回值，第二个then属于多余嵌套，直接把setChats放在第一个then内部处理数据后调用即可，逻辑更紧凑。

3. 初始数组包含多余空对象
   你初始化chatsArray = [{}]，会导致最终数组里多一个无效的空对象，应该初始化为空数组[]。

修正后的代码 #

const HomeScreen: React.FC<Props> = ({ navigation}) => {
  // 更精确的类型定义，避免模糊的索引类型
  const [chats, setChats] = useState<{id: string; data: any}[]>([]);

  useEffect(() => {
    db.collection("chats")
      .get()
      .then((querySnapshot) => {
        // 用map直接生成目标数组，替代forEach+push的写法
        const chatsArray = querySnapshot.docs.map(doc => ({
          id: doc.id,
          data: doc.data(),
        }));
        setChats(chatsArray);
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  }, []);

  // 监听chats的变化，验证state是否更新成功
  useEffect(() => {
    console.log("Updated chats: ", chats);
  }, [chats]);
 
  return (
    <SafeAreaView>
      <ScrollView style={styles.container}>
        {chats.map(chat => (
          // 示例渲染逻辑，替换成你实际的UI组件
          <div key={chat.id}>{JSON.stringify(chat.data)}</div>
        ))}
      </ScrollView>
    </SafeAreaView>
  )
}
export default HomeScreen;

关键优化点说明 #

• 用querySnapshot.docs.map()替代forEach手动push，代码更简洁且不易出错；
• 将setChats移到第一个then内部，避免冗余的Promise链；
• 给useState设置更精确的类型，提升代码可维护性；
• 添加专门的useEffect监听chats变化，用来验证state更新结果，避免在异步更新后立刻打印旧值的误区。

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