React Hooks + TypeScript报错：属性setAuth不存在于类型{}

问题原因 #

你创建AuthContext时给的默认值是{}，TypeScript会自动推断它的类型为空对象，而实际Provider传入的value包含auth和setAuth，但类型系统无法识别这一差异，因此解构setAuth时会提示属性不存在。

解决步骤 #

1. 定义明确的类型接口 #

在AuthProvider文件中，先为auth状态和Context本身定义类型：

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

// 定义auth状态的类型，根据你的业务需求补充实际属性
interface AuthState {
  // 示例字段，替换成你需要的内容
  // userId?: string;
  // isLoggedIn?: boolean;
}

// 定义Context的类型，包含auth状态和修改它的setAuth方法
interface AuthContextType {
  auth: AuthState;
  setAuth: React.Dispatch<React.SetStateAction<AuthState>>;
}

// 更新Props类型，用ReactNode支持更多子元素类型（如多个组件、文本等）
interface Props {
  children: ReactNode;
}

2. 创建带类型的Context #

创建Context时指定我们定义的AuthContextType，通过类型断言给默认值（确保类型匹配）：

const AuthContext = createContext<AuthContextType>({} as AuthContextType);

3. 修正useState的类型 #

初始化useState时指定AuthState类型，让类型系统更清晰：

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

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

export default AuthContext;

4. 增强自定义Hook的安全性（可选但推荐） #

在useAuth Hook中添加判断，确保它只能在AuthProvider内部使用，避免意外错误：

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

const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth 必须在 AuthProvider 组件内部使用');
  }
  return context;
};

export default useAuth;

完成以上修改后，TypeScript就能正确识别useAuth()返回值的类型，解构setAuth时就不会再出现类型错误了。

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