React Native出现未处理Promise拒绝：无法读取undefined的email属性求助

先梳理代码里的核心问题，再给你修正后的方案：

问题分析 #

1. useState异步更新导致取值错误：你在onAuthStateChanged回调里先执行setCurrentUser(user)，接着立刻取currentUser.email，但useState的更新是异步的，此时currentUser还是旧值（比如初始空值或上一次的用户状态），退出登录时user为null，就会触发email未定义的错误。
2. 重复订阅且未清理监听：useEffect依赖currentUser，每次currentUser变化都会调用getUser，重复添加onAuthStateChanged监听，且没有清理机制，组件卸载后仍可能触发回调引发问题。
3. 未处理Promise异常：getDoc的Promise没有catch处理，一旦数据库请求出错，会触发未处理的Promise拒绝警告。
4. 初始状态不合理：currentUser初始值用user，但这个user来源不明，初始化为null更符合Auth状态的初始逻辑。

修正后的代码 #

import { useEffect, useState } from 'react';
import { getFirestore, doc, getDoc } from 'firebase/firestore';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const db = getFirestore();
const auth = getAuth();

// 组件内部代码
const [currentUser, setCurrentUser] = useState(null);
const [userName, setUserName] = useState(""); // 重命名避免和参数user混淆

useEffect(() => {
  // 订阅Auth状态变化，返回取消订阅的函数
  const unsubscribe = onAuthStateChanged(auth, async (user) => {
    setCurrentUser(user);
    
    // 当user不存在（退出登录）时，直接清空用户名并返回
    if (!user) {
      setUserName("");
      return;
    }

    try {
      // 直接用回调参数里的user，不要依赖刚set的currentUser
      const docRef = doc(db, 'useraccounts', user.email);
      const docSnap = await getDoc(docRef);
      
      if (docSnap.exists()) {
        setUserName(docSnap.data().first);
      } else {
        console.log("用户文档不存在");
      }
    } catch (error) {
      // 捕获数据库请求异常，避免未处理的Promise拒绝
      console.error("获取用户信息失败:", error);
    }
  });

  // 组件卸载时清理订阅
  return () => unsubscribe();
}, []); // 空依赖，只在组件挂载时订阅一次

关键修改点 #

• 直接使用回调参数user：避开useState异步更新的坑，确保拿到最新的Auth用户状态。
• 添加订阅清理逻辑：onAuthStateChanged返回的取消订阅函数，在useEffect返回值中调用，保证组件卸载或重新渲染时清理旧监听。
• 空依赖数组：仅在组件挂载时订阅一次Auth状态变化，避免重复订阅。
• 处理user为null的场景：退出登录时直接清空用户名，不执行后续数据库请求。
• 添加try/catch捕获异常：处理数据库请求的错误，避免未处理的Promise拒绝警告。
• 重命名state变量：把user改成userName，避免和回调参数里的user混淆，减少代码歧义。

这样修改后，既能消除你遇到的警告，又能实现"仅在当前页面且user对象可用时订阅/取消订阅"的需求。

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