React+TypeScript创建含JWT信息的Context遇Undefined问题求助

核心问题 #

1. useAuth.ts里重新创建了独立的AuthContext实例，和AuthProvider.tsx中的上下文完全不关联，导致状态无法共享
2. 接口定义混乱，IUserData混入了上下文相关的auth和setAuth字段，职责划分不清晰
3. createContext的默认值不符合类型要求，引发TS类型校验错误

修正后的代码 #

1. 重构接口定义（interfaces.ts）

import { Dispatch, SetStateAction } from "react";

// 只存用户核心数据，职责单一
export interface IUserData {
  user?: string;
  pwd?: string;
  role?: number;
  accessToken?: string;
}

// 明确Auth上下文的类型，包含状态和更新方法
export type AuthContextType = {
  auth: IUserData;
  setAuth: Dispatch<SetStateAction<IUserData>>;
};

2. 修正AuthProvider（AuthProvider.tsx）

import { createContext, useState } from "react";
import { IUserData, AuthContextType } from "../interfaces/interfaces";

// 给上下文设置合理默认值，避免TS报错（实际项目要确保组件被Provider包裹）
const AuthContext = createContext<AuthContextType>({
  auth: {},
  setAuth: () => {},
});

interface Props {
  children: JSX.Element | JSX.Element[];
}

export const AuthProvider = ({ children }: Props) => {
  const [auth, setAuth] = useState<IUserData>({});

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

3. 修正useAuth钩子（useAuth.tsx）

import { useContext, useDebugValue } from "react";
import AuthContext from "./AuthProvider"; // 导入AuthProvider里的上下文实例
import { IUserData } from "../interfaces/interfaces";

const useAuth = () => {
  const { auth, setAuth } = useContext(AuthContext);
  
  useDebugValue(auth, (auth) => auth?.user ? "已登录" : "未登录");
  
  return { auth, setAuth };
};

export default useAuth;

4. 确保根组件被AuthProvider包裹（比如App.tsx）

import { AuthProvider } from "./path/to/AuthProvider";

function App() {
  return (
    <AuthProvider>
      {/* 这里放你的路由、页面等所有需要共享Auth状态的组件 */}
    </AuthProvider>
  );
}

export default App;

修复后效果 #

• 调用setAuth后，全局Auth状态会同步更新，其他页面能正常获取到auth.user、auth.role等字段
• TS类型校验完全正常，不会出现类型不匹配或undefined的问题
• 代码职责清晰，维护性更强

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