React Native中如何渲染Firestore数据？数据已获取却不显示

你的代码存在两个关键问题，导致数据无法正常渲染：

1. useState 更新逻辑错误 #

在getWorkouts中用forEach循环逐个调用setWorkouts，由于useState的更新是异步的，且每次循环里的workouts都是初始的空数组状态，最终只会保留最后一条数据（甚至可能因状态合并问题丢失部分数据）。

正确做法是先将所有文档数据一次性收集到数组中，再更新状态：

const getWorkouts = async () => {
  const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
  const workoutDocs = await getDocs(workoutsCollection);
  // 批量提取所有文档数据
  const workoutsData = workoutDocs.docs.map(doc => doc.data());
  setWorkouts(workoutsData);
};

2. map 函数未返回渲染元素 #

你的map回调使用了大括号，但没有显式返回<Text>组件，导致map生成的是全为undefined的数组，自然无法渲染内容。可以改成两种写法：

• 显式添加return：

{workouts.map((workout) => {
  return <Text key={workout.id}>{workout.name}</Text>;
})}

• 去掉大括号用隐式返回：

{workouts.map((workout) => (
  <Text key={workout.id}>{workout.name}</Text>
))}

另外，记得给map生成的元素添加唯一key属性（如果workout对象本身没有id，可以在收集数据时带上Firestore文档的id：const workoutsData = workoutDocs.docs.map(doc => ({...doc.data(), id: doc.id}));）

完整修正后的代码 #

export function TestScreen() {
  const [workouts, setWorkouts] = React.useState([]);

  const getWorkouts = async () => {
    const workoutsCollection = collection(db, 'Users', auth.currentUser.uid, 'Workouts');
    const workoutDocs = await getDocs(workoutsCollection);
    // 收集数据并带上文档id作为key
    const workoutsData = workoutDocs.docs.map(doc => ({
      ...doc.data(),
      id: doc.id
    }));
    setWorkouts(workoutsData);
  };

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

  return (
    <View>
      <Text>{auth.currentUser.uid}</Text>
      <Text>{auth.currentUser.phoneNumber}</Text>

      {workouts.map((workout) => (
        <Text key={workout.id}>{workout.name}</Text>
      ))}
    </View>
  );
}

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