React Native中Firestore数据可打印至控制台但无法在页面显示

数据老陈

2026-8-6

解决Firestore数据在React Native界面不显示的问题

问题根源

你当前的代码仅在控制台打印了Firestore返回的数据，但未将数据存入React组件的状态中，且渲染代码里的doc变量不在当前作用域内，导致界面无法读取到数据。

修复步骤

添加状态存储学生数据
在组件顶部用useState定义状态，用来保存从Firestore获取到的学生信息：

const [studentData, setStudentData] = useState(null);
const [loading, setLoading] = useState(true); // 处理加载状态

修改Firestore数据获取逻辑
获取到数据后，将数据存入状态。因邮箱是唯一标识，直接取查询结果的第一个文档即可，无需遍历：

onAuthStateChanged(auth, async (user) => {
  if (user) {
    setUser(user);
    const uemail = user.email;
    const q = query(collection(db, "student"), where("studentEmail", "==", uemail));
    const querySnapshot = await getDocs(q);
    if (!querySnapshot.empty) {
      // 取第一个匹配的文档数据
      const student = querySnapshot.docs[0].data();
      setStudentData(student);
    } else {
      console.log("未找到匹配的学生数据");
    }
    setLoading(false);
  } else {
    setStudentData(null);
    setLoading(false);
  }
});

修改界面渲染逻辑
渲染时先判断加载状态和数据是否存在，再显示对应字段：

if (loading) {
  return <View><Text>加载中...</Text></View>;
}

return (
  <View>
    {studentData ? (
      <Text style={styles.name}>{studentData.Address}</Text>
    ) : (
      <Text>未获取到学生信息</Text>
    )}
  </View>
);