React Redux调用dispatch时无法获取Firestore数据求助

核心问题分析 #

1. Auth状态未就绪时调用fetchUser：组件挂载时直接执行fetchUser，此时Firebase Auth的currentUser可能还未完成异步初始化，导致auth.currentUser!.uid触发隐式错误，中断Firestore查询流程。
2. Reducer未正确处理Action：User reducer未针对USER_STATE_CHANGE类型做分支处理，且错误读取action.currentUser（实际用户数据存储在Action的payload字段中）。
3. 缺少错误捕获机制：Firestore查询的Promise未添加catch逻辑，无法排查查询失败的具体原因。
4. Auth状态订阅未清理：onAuthStateChanged的订阅未在组件卸载时取消，可能引发内存泄漏。

分步修改代码 #

1. 调整fetchUser调用时机（Main.tsx）

将fetchUser移到onAuthStateChanged的用户存在回调中，确保只有Auth状态确认用户已登录时才执行查询：

function Main() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    // 订阅Auth状态变化，保存取消订阅函数
    const unsubscribeAuth = auth.onAuthStateChanged((user) => {
      if (user) {
        setIsAuthenticated(true);
        fetchUser(); // 确认用户存在后再执行查询
      } else {
        setIsAuthenticated(false);
      }
    });

    // 组件卸载时清理订阅
    return () => unsubscribeAuth();
  }, [fetchUser]); // 将fetchUser加入依赖数组

  // ... 原有返回代码
}

2. 修复User Reducer（reducers/user.ts）

添加USER_STATE_CHANGE分支处理，正确读取Action的payload字段：

import { USER_STATE_CHANGE } from '../constants';

const initialState = {
  currentUser: null,
};

export const user = (state = initialState, action: any) => {
  switch (action.type) {
    case USER_STATE_CHANGE:
      return {
        ...state,
        currentUser: action.payload, // 读取Action的payload数据
      };
    default:
      return state; // 默认返回原状态，避免无意义的状态更新
  }
};

3. 完善Action的错误处理（action/index.ts）

添加currentUser空值检查和Promise错误捕获，便于排查问题：

import { db, auth } from '../../services/firebase';
import { USER_STATE_CHANGE } from '../constants';

export function fetchUser() {
  return (dispatch: any) => {
    const currentUser = auth.currentUser;
    if (!currentUser) {
      console.error('未检测到已认证用户');
      return;
    }

    db.collection('users')
      .doc(currentUser.uid)
      .get()
      .then((snapshot) => {
        if (snapshot.exists) {
          console.log(snapshot);
          dispatch({
            type: USER_STATE_CHANGE,
            payload: snapshot.data(),
          });
        } else {
          console.log('Firestore中不存在该用户文档');
        }
      })
      .catch((error) => {
        console.error('获取用户文档失败:', error);
      });
  };
}

额外检查项 #

• 确认Firebase配置正确，db和auth实例已完成初始化
• 检查Firestore的users集合中是否存在对应用户UID的文档
• 确保Firestore安全规则允许已认证用户读取自身文档

内容的提问来源于stack exchange，提问作者Nilton Schumacher F