React Native中使用Firestore获取文档内容遇异步问题求助

你不能直接把async加到组件函数UserHome上——React组件必须返回React元素（比如<View>、<Text>这类），而async函数会返回Promise对象，这就是你看到"Objects are not valid as a react child"错误的核心原因：React无法渲染Promise。

正确的做法是用React的useState管理数据状态，用useEffect执行异步数据获取逻辑，具体修改如下：

import { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { doc, getDoc } from 'firebase/firestore';
import { signOut } from 'firebase/auth';
import { useRoute } from '@react-navigation/native';

export function UserHome({ navigation }) {
  const route = useRoute();
  const userID = route.params?.userID;
  
  // 用状态管理用户数据、加载状态和错误信息
  const [userData, setUserData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步函数封装Firestore数据获取逻辑
    const fetchUserData = async () => {
      if (!userID) {
        setError('用户ID不存在');
        setIsLoading(false);
        return;
      }
      try {
        const docRef = doc(db, "userInfo", userID);
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
          console.log("Document data:", docSnap.data());
          setUserData(docSnap.data());
        } else {
          console.log("No such document!");
          setError('未找到用户信息');
        }
      } catch (err) {
        console.error('获取数据失败:', err);
        setError('获取用户信息失败');
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserData();
  }, [userID]); // 当userID变化时重新执行数据获取

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

  // 根据状态渲染对应UI
  if (isLoading) {
    return <View><Text>加载中...</Text></View>;
  }

  if (error) {
    return <View><Text>{error}</Text></View>;
  }

  return (
    <View>
      <Text>You're officially in!!</Text>
      {/* 展示从Firestore获取的用户数据，根据你的文档结构调整字段 */}
      {userData && (
        <View style={{ marginVertical: 15, paddingHorizontal: 10 }}>
          <Text>用户名: {userData.name}</Text>
          <Text>邮箱: {userData.email}</Text>
        </View>
      )}
      <Button
        containerStyle={{
          padding: 10,
          height: 45,
          overflow: "hidden",
          borderRadius: 20,
          backgroundColor: "#8252ff",
        }}
        disabledContainerStyle={{ backgroundColor: "grey" }}
        style={{
          fontSize: 18,
          color: "white",
          textAlign: "center",
        }}
        onPress={handleSignOut}
      >
        Sign Out
      </Button>
    </View>
  );
}

关键修改说明 #

• 状态管理：用useState存储用户数据、加载状态和错误信息，状态变化时自动触发组件重新渲染，更新UI。
• 异步逻辑封装：在useEffect内部定义异步函数fetchUserData并调用——useEffect的回调不能直接是async，所以需要这种嵌套写法。
• 依赖数组：useEffect的依赖项设为[userID]，确保当用户ID变化时重新获取数据。
• 状态分支渲染：根据isLoading、error、userData的状态分别渲染加载提示、错误信息或用户数据，避免数据未就绪时渲染无效内容。

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