Redux 中的 Firebase 用户对象意外被嵌套包装问题解析_技术教程

redux 中的 firebase 用户对象意外被嵌套包装问题解析：firebase 的用户对象（如 `usercredential.user`）是不可序列化的特殊类实例，直接存入 redux store 会导致 react-redux 在状态映射时自动将其转换为带 `_x`/`_y`/`_z` 等私有键的代理包装结构，引发 `mapstatetoprops` 返回异常嵌套状态。

这个问题的根本原因在于 Firebase SDK 返回的 User 实例不是普通 JavaScript 对象——它是一个带有原型链、getter 方法（如 uid, email）、内部私有属性和不可枚举字段的类实例。Redux 要求 store 中的状态必须是可序列化的纯对象（plain object），而 React-Redux 在连接组件时会对 state 进行浅层冻结与代理封装（尤其在开发模式或使用某些调试工具时），当检测到非 plain object（如 Firebase User）时，会尝试“安全化”处理，结果就是你看到的 _z、_x 等神秘嵌套键。

✅ 正确做法：始终将 Firebase 用户对象转换为普通 JSON 对象，推荐使用 .toJSON() 方法（Firebase v9+ 支持）：

await signInWithEmailAndPassword(auth, email, pass)
  .then(async (userCredential) => {
    const user = userCredential.user;
    const token = await auth.currentUser?.getIdToken();

    // ✅ 关键修复：调用 toJSON() 获取纯对象
    props.setUser({
      id: user.uid, // 或 user.toJSON().uid
      email: user.email,
      token
    });

    props.navigation.navigate('Home');
  });

⚠️ 注意：user.toJSON() 返回的是一个标准 plain object（不含方法、无原型、所有属性可枚举），等价于：

{
  uid: "...",
  email: "...",
  displayName: null,
  photoURL: null,
  // ... 其他字段
}

? 同时，请确保你的 reducer 是同步的——你当前定义了 async (state, action) => { ... }，这是严重错误！Redux reducer 绝不能是异步函数（async 会返回 Promise，破坏 Redux 状态更新机制）。请立即修正为：

// ❌ 错误：async reducer —— 会导致 state 变成 Promise
const userReducer = async (state = INITIAL_USER_STATE, action) => { ... }

// ✅ 正确：同步纯函数
const userReducer = (state = INITIAL_USER_STATE, action: { type: string; payload: User }) => {
  switch (action.type) {
    case 'SET_USER':
      console.log('Setting user:', action.payload); // 推荐用 console 替代 alert
      return { ...action.payload }; // 显式展开确保是 plain object
    default:
      return state;
  }
};

? 额外建议：

在 mapStateToProps 中添加类型守卫，避免运行时崩溃：

const mapStateToProps = (state: { user: User | Record }) => {
  const { user } = state;
  // 安全访问：仅当是 plain object 且含 uid 才视为有效用户
  const safeUser = user && typeof user === 'object' && 'uid' in user ? user : null;
  return { user: safeUser };
};