React Native中Firebase实时数据库返回空数组问题求助

核心原因：useState更新的异步特性 #

你在调用setDatos(result)后立刻console.log(datos)，拿到的是更新前的旧状态——React的useState更新是异步批量处理的，不会同步修改状态变量，所以此时datos还是初始的空数组。

正确的状态验证方式 #

有两种可靠方法确认datos是否被正确更新：

1. 在组件顶层打印状态 #

把console.log放在组件的顶层区域，每次组件重新渲染时都会输出最新的datos值：

const Partida = () => {
  const [datos, setDatos] = useState([]);
  console.log("当前最新datos:", datos); // 组件每次渲染都会输出最新状态

  // ... 其他代码逻辑
};

2. 用useEffect监听状态变化 #

添加一个专门监听datos的useEffect，当状态发生改变时自动触发日志：

useEffect(() => {
  console.log("datos已更新:", datos);
}, [datos]); // 依赖项设为datos，状态变化时执行

修正后的完整代码示例 #

import { StyleSheet, Text, View } from "react-native";
import Contador from "../components/Partida/Contador";
import { database } from "../src/config/fb";
import { collection, getDocs } from "firebase/firestore";
import { useEffect, useState } from "react";

const Partida = () => {
  const [datos, setDatos] = useState([]);

  const retrieveDocs = async () => {
    try {
      const matchCol = collection(database, "Partida");
      const data = await getDocs(matchCol);
      const result = data.docs.map(doc => doc.data());
      setDatos(result);
      // 此处不要直接log datos，拿到的是更新前的旧值
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    retrieveDocs();
  }, []);

  // 监听datos状态变化，打印最新值
  useEffect(() => {
    console.log("最新datos内容:", datos);
  }, [datos]);

  return (
    <View style={styles.pantalla}>
      {/* 可以在这里渲染datos的数据 */}
      {datos.map((item, index) => (
        <Text key={index}>{JSON.stringify(item)}</Text>
      ))}
      <Contador />
      <Contador />
    </View>
  );
};

const styles = StyleSheet.create({
  pantalla: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Partida;

关于“更新代码后能输出正确日志”的解释 #

修改代码重新运行（热重载）时，组件会重新初始化并完成一次完整渲染，此时datos已经在之前的useEffect中被赋值，所以控制台能看到正确的值——这是组件状态更新后重新渲染的结果，并非setDatos同步生效。

内容的提问来源于stack exchange，提问作者Javi Gauxachs Monserrat