React Native调用Firestore异步函数返回异常结果求助

你看到的{"_A": null, "_x": 0, "_y": 0, "_z": null}是Promise对象的内部状态结构，因为getUserDetails()是异步函数，直接调用它不会立刻返回实际数据，而是返回一个Promise——这是所有异步函数的默认行为。你在函数内部用await拿到了真实数据，但外部调用时没处理这个Promise，所以拿到的不是用户信息本身。

在React组件中，需要结合useState（存储数据状态）和useEffect（触发异步操作）来正确获取并管理异步数据，具体步骤如下：

• 用useState声明状态变量，用于存储用户详情
• 在useEffect中调用异步函数，通过await获取实际数据后更新状态
• 增加用户未登录的边界判断，避免user.uid报错

import { Pressable, Text } from 'react-native';
import { getAuth } from 'firebase/auth';
import { doc, getDoc } from 'firebase/firestore';
import { db } from '../components/FirebaseConfig';
import { useEffect, useState } from 'react';

function HomeScreen() {
  // 声明状态变量存储用户详情，初始值为null
  const [userDetails, setUserDetails] = useState(null);

  // 异步获取用户详情的函数
  async function getUserDetails() {
    const user = getAuth().currentUser;
    // 先判断用户是否登录，避免uid报错
    if (!user) {
      console.log("用户未登录");
      return null;
    }
    const userRef = doc(db, "users", user.uid);
    const docSnap = await getDoc(userRef);
    if (docSnap.exists()) {
      console.log("Document data:", docSnap.data());
      return docSnap.data();
    } else {
      console.log("No such document!");
      return null;
    }
  }

  // 使用useEffect触发异步数据获取，组件挂载时执行一次
  useEffect(() => {
    async function fetchData() {
      const details = await getUserDetails();
      // 更新状态变量，触发组件重新渲染
      setUserDetails(details);
    }
    fetchData();
  }, []); // 空依赖数组表示只在组件挂载时执行

  // 现在打印的会是实际的用户数据（或null）
  console.log(userDetails);

  return (
    <Text>
      {userDetails ? `Welcome ${userDetails.first}` : "Loading..."}
    </Text>
  );
}

export default HomeScreen

• 用useState管理用户数据状态，确保数据变化时组件能自动重新渲染
• 在useEffect中封装异步调用，因为React组件顶层不能直接使用await
• 添加用户登录状态判断，避免未登录场景下的报错
• 通过setUserDetails更新状态，将异步获取的真实数据存入状态变量

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