React useAuth调用触发ts2339、ts2558类型报错问题求解

两个TS报错的核心原因都来自类型定义缺失：

• Property 'auth' does not exist on type '{}'.ts(2339)：创建AuthContext时传入的默认值是空对象{}，TS自动推导Context的类型为{}，该类型不存在auth字段，解构时自然触发类型错误。
• Expected 0 type arguments, but got 1.ts(2558)：自定义的useAuth没有定义泛型入参，TS不允许给无泛型声明的函数传入尖括号类型参数，因此useAuth<any>()的写法会报错。

1. 定义Context的明确类型 #

首先根据你实际在Context中存储的字段，声明对应的类型结构，同时修正createContext的调用，传入泛型参数指定Context类型：

// AuthContext_Provider 文件内
import { createContext, useState } from "react";

// 定义用户信息结构，可根据业务需求扩展字段
interface AuthUser {
  username: string;
  accessToken?: string;
  roles?: number[];
}

// 定义Context整体结构，包含存储值和操作方法
interface AuthContextType {
  auth: AuthUser;
  setAuth: React.Dispatch<React.SetStateAction<AuthUser>>;
}

// 创建Context时传入泛型，用类型断言处理初始空值（实际值会在Provider中注入）
const AuthContext = createContext<AuthContextType>({} as AuthContextType);

// Provider组件逻辑
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [auth, setAuth] = useState<AuthUser>({ username: "" });
  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext;

2. 优化useAuth逻辑 #

Context指定泛型类型后，useContext会自动推导返回值类型，不需要给useAuth额外加类型参数，可额外增加边界校验避免错误调用：

// useAuth.ts 文件
import { useContext } from "react";
import AuthContext from "../context/AuthContext_Provider"

const useAuth = () => {
  const context = useContext(AuthContext);
  // 边界判断：避免hook在Provider包裹范围外调用
  if (context === undefined) {
    throw new Error("useAuth必须在AuthProvider包裹的组件内使用");
  }
  return context;
}

export default useAuth

不需要给useAuth传入任何类型参数，直接解构即可获得完整类型提示：

// 业务组件内使用
const { auth, setAuth } = useAuth();

// 此时访问auth字段不会触发类型报错，TS会自动校验字段类型
console.log(auth.username);

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