React+TypeScript基于角色授权路由：useAuth调用setAuth类型错误求助

云原生阿岚

2026-7-24

解决React + TypeScript中useAuth的类型错误

问题原因

你遇到的类型错误是因为createContext初始值设为{}时，TypeScript会自动推断其类型为空对象，导致useContext返回的对象类型不包含setAuth属性，解构时自然报错。

解决方案步骤

1. 定义Auth相关类型

在AuthProvider.tsx中先明确状态和上下文的类型，让TypeScript能准确识别结构：

import { createContext, useState, ReactNode } from "react";

// 定义auth状态的类型，可根据你的业务需求扩展字段
type AuthState = {
  user?: {
    id: string;
    role: string;
  };
};

// 定义上下文的类型，包含状态和修改状态的方法
type AuthContextType = {
  auth: AuthState;
  setAuth: React.Dispatch<React.SetStateAction<AuthState>>;
};

2. 修正Context的创建与初始值

给createContext指定明确类型，避免TypeScript错误推断：

// 创建Context，初始值设为undefined，后续通过Provider注入正确值
const AuthContext = createContext<AuthContextType | undefined>(undefined);

3. 完善AuthProvider组件

给useState指定类型，确保状态符合定义的结构：

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  // 指定useState的类型为AuthState
  const [auth, setAuth] = useState<AuthState>({});

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

export default AuthContext;

4. 修改useAuth钩子添加类型安全检查

在useAuth.ts中添加判断，确保钩子仅在AuthProvider包裹的组件内使用，同时让TypeScript确认返回值类型：

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};

export default useAuth;