React Firebase：如何在getAuth()完成后执行依赖用户UID的函数？

你遇到的问题是因为Firebase Auth的初始化是异步的，getAuth()返回的auth对象初始时currentUser为null，直接访问uid自然会报错。下面是两种可靠的解决方式：

方式一：监听Auth状态变化（推荐） #

使用Firebase提供的onAuthStateChanged监听用户登录状态，它会在Auth初始化完成、用户登录/登出时触发回调，确保你能在拿到有效用户对象后再执行依赖UID的操作。

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

// 假设db是你的Firestore实例
function YourComponent() {
  const auth = getAuth();

  useEffect(() => {
    // 注册状态监听
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        // 用户状态已确定，安全获取UID并查询数据
        getDoc(doc(db, 'users', user.uid))
          .then(docSnapshot => {
            if (docSnapshot.exists()) {
              // 处理获取到的用户数据
              console.log('用户数据：', docSnapshot.data());
            } else {
              console.log('该用户记录不存在');
            }
          })
          .catch(error => {
            console.error('查询用户数据失败：', error);
          });
      } else {
        // 用户未登录的处理逻辑
        console.log('用户未登录');
      }
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return <div>你的组件内容</div>;
}

方式二：事件触发时检查用户状态 #

如果是在某个交互事件（比如按钮点击）中执行查询，可以先检查currentUser是否存在：

import { getAuth } from "firebase/auth";
import { getDoc, doc } from "firebase/firestore";

function YourComponent() {
  const handleFetchUserData = () => {
    const auth = getAuth();
    const user = auth.currentUser;
    
    if (user) {
      // 用户已登录，执行查询
      getDoc(doc(db, 'users', user.uid))
        .then(docSnapshot => {
          // 处理数据
        })
        .catch(err => console.error('查询失败：', err));
    } else {
      // 用户未登录的提示或跳转逻辑
      alert('请先登录');
    }
  };

  return <button onClick={handleFetchUserData}>获取用户数据</button>;
}

关键说明 #

Firebase Auth的currentUser只有在Auth初始化完成后才会有值，直接在组件渲染时访问大概率会拿到null。onAuthStateChanged是官方推荐的监听用户状态的方式，能覆盖初始化、登录、登出所有场景，确保你在正确的时机执行依赖用户信息的代码。

内容的提问来源于stack exchange，提问作者Oğuz Demir