TypeError: 无法解构undefined的currentUser属性，React自定义PrivateRoute报错求助

这个报错的本质是useAuth()执行后返回了undefined，因此无法从undefined上解构currentUser属性，常见成因和修复方案如下： #

核心成因 #

1. 应用未被AuthProvider包裹：useAuth本质是调用useContext读取AuthContext的上下文值，如果使用useAuth的组件上层没有对应的AuthProvider提供上下文，useContext(AuthContext)就会返回创建Context时的默认值，你创建AuthContext时没有传入默认值，默认值就是undefined。
2. 导入路径错误：如果PrivateRoute.js中useAuth的导入路径和AuthContext.js的实际存放路径不匹配，导入的useAuth本身就是undefined，调用后自然也返回undefined。

修复步骤 #

• 第一步：在根组件（通常是index.js或App.js）外层包裹AuthProvider，示例代码如下：

// index.js 示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AuthProvider } from './UserAuthentication/AuthContext'; // 替换为你实际的AuthContext路径

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
);

• 第二步：核对PrivateRoute.js中useAuth的导入路径，确保和本地文件存放路径完全一致。

可选优化（避免后续逻辑异常） #

你当前currentUser初始值设为了空对象{}，空对象为真值，Firebase还未返回用户状态的首次渲染阶段，私有路由会直接放行，建议调整为带加载状态的实现，避免逻辑错误：

修改后的AuthContext.js #

import React, {useState, useEffect, useContext} from 'react';
import {auth} from '../Database/Firebase';

const AuthContext = React.createContext();

const useAuth = () => {
  return useContext(AuthContext);
}

const AuthProvider = (props) =>{
  const [currentUser, setCurrentUser] = useState(null);
  const [loading, setLoading] = useState(true); // 新增加载状态
  const signup = (email, password) =>{
    return auth.createUserWithEmailAndPassword(email, password);
  }

  const login = (email, password) =>{
    return auth.signInWithEmailAndPassword(email, password);
  }
  
  const logout =() =>{
    return auth.signOut();
  }

  useEffect(() =>{
    const unscubscribe = auth.onAuthStateChanged((user) =>{
      setCurrentUser(user);
      setLoading(false); // 身份状态获取完成后关闭加载
    });
    return unscubscribe;
  }, []);

  // 加载阶段不渲染子组件，避免路由逻辑提前执行
  if(loading) return <div>加载中...</div>

  return (
    <AuthContext.Provider value={{currentUser, signup, login, logout, loading}}>
    {props.children}
    </AuthContext.Provider>
  );
}

export { AuthProvider, useAuth};

修改后的PrivateRoute.js #

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {useAuth} from "../UserAuthentication/AuthContext";

const PrivateRoute = ({component: Component, ...rest}) => {
  const {currentUser, loading} = useAuth();
  // 加载阶段返回加载提示，不做跳转判断
  if(loading) return <div>加载中...</div>
  return (
    <Route
      {...rest}
      render = {(props) =>{
        return currentUser ? (<Component {...props} />) : (<Redirect to='/login' />)
      }} >
    </Route>
  );
}

export default PrivateRoute;

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