React Native新手求助：Firestore文档获取失败，无法显示全名

问题分析 #

你的代码存在几个核心问题：

• 声明的异步函数仅定义但未执行，完全没触发Firestore文档获取逻辑
• 未处理userID可能为undefined的情况，会导致doc()函数接收无效参数，触发报错
• 缺少状态变量存储用户数据，无法在界面上渲染全名

修复后的完整代码 #

import React, { useEffect, useState } from "react";
import { View, Text, Alert } from "react-native";
import { signOut } from "firebase/auth";
import { auth } from "../firebase/firebase";
import Button from "react-native-button";
import { db } from "../firebase/firebase";
import { doc, getDoc } from "firebase/firestore";
import { useRoute } from "@react-navigation/native";

export function UserHome({ navigation }) {
  const route = useRoute();
  const userID = route.params?.userID;
  const [userFullName, setUserFullName] = useState("");

  useEffect(() => {
    const fetchUserInfo = async () => {
      // 先校验用户ID是否有效
      if (!userID) {
        Alert.alert("错误", "用户ID不存在");
        return;
      }

      try {
        const docRef = doc(db, "userInfo", userID);
        const docSnap = await getDoc(docRef);
        
        if (docSnap.exists()) {
          // 注意：这里的fullName需替换为你Firestore文档中实际的全名字段名
          setUserFullName(docSnap.data().fullName);
        } else {
          Alert.alert("提示", "未找到用户信息");
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        Alert.alert("错误", "获取用户信息失败");
      }
    };

    fetchUserInfo();
  }, [userID]);

  const handleSignOut = () => {
    signOut(auth)
      .then(() => {
        navigation.replace("Home");
      })
      .catch((error) => {
        console.error("登出失败:", error);
      });
  };

  return (
    <View style={{ padding: 20, marginTop: 50 }}>
      <Text>You're officially in!!</Text>
      {/* 渲染获取到的用户全名 */}
      {userFullName ? (
        <Text style={{ marginTop: 10, fontSize: 16 }}>欢迎, {userFullName}!</Text>
      ) : (
        <Text style={{ marginTop: 10 }}>加载用户信息中...</Text>
      )}
      <Button
        containerStyle={{
          padding: 10,
          height: 45,
          overflow: "hidden",
          borderRadius: 20,
          backgroundColor: "#8252ff",
          marginTop: 20,
        }}
        disabledContainerStyle={{ backgroundColor: "grey" }}
        style={{
          fontSize: 18,
          color: "white",
          textAlign: "center",
        }}
        onPress={handleSignOut}
      >
        Sign Out
      </Button>
    </View>
  );
}

关键修改说明 #

• 新增useState状态变量存储用户全名，用于界面渲染
• 用useEffect包裹异步逻辑，确保组件挂载时自动执行，且userID变化时重新获取数据
• 增加userID非空校验，避免向Firestore传入无效参数
• 添加try/catch捕获错误，便于调试和给用户反馈
• 检查文档是否存在后再读取字段，避免访问不存在的数据导致报错

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