TypeScript中如何设置React Context的Provider值以支持上下文修改？

你的问题核心在于Context的类型定义和实际提供的value结构不匹配——原来的IAuth只定义了权限数据的结构，但你想在Context里同时暴露数据和修改状态的方法，所以首先要调整类型定义，让它能容纳这两部分内容。

步骤1：更新Context的类型接口 #

先拆分并重新定义类型，把纯数据和操作方法分开，让Context的结构更清晰：

import React, { createContext, useContext, FC, SetStateAction, useState, Dispatch } from 'react';

// 定义权限数据的纯结构
export interface IAuthData {
  loggedIn: boolean;
  role: string;
}

// 定义Context的完整结构：包含数据和修改方法
export interface IAuthContext {
  auth: IAuthData;
  updateAuth: Dispatch<SetStateAction<IAuthData>>; // 复用React内置的Dispatch类型，匹配useState的set函数
}

步骤2：创建Context并设置合规的默认值 #

Context必须有默认值，我们要按照新的IAuthContext结构提供，避免未被Provider包裹时出现错误：

export const AuthContext = createContext<IAuthContext>({
  auth: { loggedIn: false, role: '' },
  updateAuth: () => {} // 默认空函数，防止意外调用报错
});

步骤3：更新AuthProvider组件 #

现在Provider的value可以直接传入auth和setAuth，完全符合类型要求：

const AuthProvider: FC = ({ children }) => {
  const [auth, setAuth] = useState<IAuthData>({ loggedIn: false, role: '' });

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

export default AuthProvider;

步骤4：在组件中消费Context #

函数组件（推荐用useContext） #

把Nav改成函数组件，使用useContext会更简洁直观：

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

const Nav = () => {
  const { auth } = useContext(AuthContext);

  return (
    <div>
      <ul className="nav">
        {auth.loggedIn ? (
          <>
            <li>首页</li>
            {auth.role === 'Admin' && <li>管理后台</li>}
            {auth.role === 'Super Admin' && <li>超级管理控制台</li>}
            <li>个人中心</li>
          </>
        ) : (
          <>
            <li>首页</li>
            <li>登录</li>
            <li>注册</li>
          </>
        )}
      </ul>
    </div>
  );
};

export default Nav;

类组件（保留Consumer用法） #

如果想继续用类组件的Consumer，只需要调整消费时的解构逻辑：

import React, { Fragment } from 'react';
import { AuthContext } from './AuthProvider';

class Nav extends React.Component {
  render() {
    return (
      <AuthContext.Consumer>
        {({ auth }) => ( // 解构出auth数据
          <div>
            <ul className="nav">
              {auth.loggedIn ? (
                <Fragment>
                  <li>首页</li>
                  {auth.role === 'Super Admin' && <li>超级管理</li>}
                  <li>退出登录</li>
                </Fragment>
              ) : (
                <Fragment>
                  <li>首页</li>
                  <li>登录</li>
                </Fragment>
              )}
            </ul>
          </div>
        )}
      </AuthContext.Consumer>
    );
  }
}

export default Nav;

步骤5：在登录组件中修改权限状态 #

登录成功后，你可以直接调用updateAuth修改上下文状态：

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

const Login = () => {
  const { updateAuth } = useContext(AuthContext);

  const handleLogin = () => {
    // 模拟登录请求
    setTimeout(() => {
      // 直接设置新状态
      updateAuth({ loggedIn: true, role: 'Admin' });
      // 如果需要基于之前的状态更新，用函数式写法
      // updateAuth(prevAuth => ({ ...prevAuth, loggedIn: true, role: 'Admin' }));
    }, 1000);
  };

  return <button onClick={handleLogin}>登录</button>;
};

export default Login;

为什么之前的尝试会报错？ #

• 数组形式报错：你定义的Context类型是IAuth（仅包含loggedIn和role），但传入的是数组结构，类型完全不匹配。
• 对象形式报错：你传入的{data: auth, updateAuth: ...}不符合IAuth的结构，IAuth中没有data和updateAuth属性，TypeScript会严格校验结构一致性，所以报错。

核心原则就是让Context的类型定义和实际提供的value结构完全一致，TypeScript才能正确推断和校验类型。

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