使用Firebase+Redux Toolkit创建用户时出现TypeError报错求助

你在使用Firebase身份验证结合Redux Toolkit的createAsyncThunk实现用户注册时，遇到了Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')错误，以下是几种常见的排查和解决方法：

1. 检查createUser的导入路径 #

确保在注册页面中，createUser的导入路径完全正确。如果路径写错，createUser会变成undefined，调用createUser(...)会返回undefined，传递给dispatch后就会触发这个错误——因为Redux要求action必须包含type属性，而undefined显然没有。

2. 正确获取Redux的dispatch函数 #

在注册组件内部，必须通过useDispatch钩子初始化dispatch：

import { useDispatch } from 'react-redux';
import { createUser } from '../features/userSlice'; // 替换为你的实际路径

const SignupPage = () => {
  const dispatch = useDispatch(); // 这一步不能省略

  const onSubmit = async(data: SignupFormInputs) => {
    try {
      await dispatch(createUser({ email: data.email, password: data.password })).unwrap();
    } catch (err) {
      console.error('注册失败:', err);
    }
  };

  // 其他组件逻辑
};

如果跳过const dispatch = useDispatch();，dispatch变量会是undefined，调用时必然出错。

3. 验证Firebase Auth实例的初始化 #

检查@/lib/firebase.ts中的auth实例是否正确初始化并导出：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 替换成你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

如果auth实例未正确初始化，createUserWithEmailAndPassword会抛出异常，可能导致thunk的错误处理流程出现异常。

4. 添加错误捕获处理 #

在onSubmit中用try/catch包裹dispatch调用，并通过unwrap()获取真实错误：

const onSubmit = async(data: SignupFormInputs) => {
  try {
    // unwrap()会将thunk的成功结果返回，或抛出失败时的错误
    await dispatch(createUser({ email: data.email, password: data.password })).unwrap();
    // 注册成功后的逻辑，比如跳转首页
  } catch (error) {
    console.error('注册出错:', error);
    // 这里可以给用户显示错误提示，比如邮箱已存在、密码强度不够等
  }
};

这样可以避免未处理的Promise拒绝，同时捕获Firebase返回的具体错误信息。

5. 确认Redux Store已添加userSlice的reducer #

检查你的Redux Store配置，确保userSlice的reducer已被正确添加：

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./features/userSlice"; // 替换为实际路径

export const store = configureStore({
  reducer: {
    user: userReducer, // 必须包含这一行
  },
});

如果没有添加userReducer，extraReducers中的状态更新逻辑不会生效，可能引发后续状态异常。

内容的提问来源于stack exchange，提问作者MD Jahid Hasan