TypeScript中使用useContext报错，类型不匹配问题求助

问题原因 #

你定义AppContext时指定的类型是IUser，但在AppContext.Provider中传入的value是包含userstate、login、logout的对象，这个对象的结构和IUser完全不匹配，所以TypeScript抛出类型错误。

修复步骤 #

1. 定义正确的Context类型
   创建一个包含用户状态和操作方法的新类型，替代原来直接用IUser作为Context的类型：

   type AppContextType = {
     userstate: IUser;
     login: (useremail: string) => void;
     logout: () => void;
   };
   

2. 初始化Context时使用正确的默认值
   createContext需要传入符合AppContextType的默认值，补充完整默认内容：

   export const AppContext = createContext<AppContextType>({
     userstate: user,
     login: () => {},
     logout: () => {}
   });
   

3. 修正组件细节（规范命名+优化类型）
   组件名改用大驼峰（符合React规范），props类型替换为React.PropsWithChildren<{}>避免any，同时修正拼写错误：

完整修正后的代码 #

import React, { createContext, useContext, useState, PropsWithChildren } from "react";

type IUser = {
  email: string; // 替换String为string，TypeScript中优先使用基本类型
  isAuthorized: boolean;
};
const defaultUser: IUser = { email: "", isAuthorized: false };

// 定义Context的完整类型
type AppContextType = {
  userstate: IUser;
  login: (useremail: string) => void;
  logout: () => void;
  updateEmail: (email: string) => void; // 修正拼写错误
};

// 初始化Context，提供符合类型的默认值
export const AppContext = createContext<AppContextType>({
  userstate: defaultUser,
  login: () => {},
  logout: () => {},
  updateEmail: () => {}
});

// 组件名遵循大驼峰规范，props使用PropsWithChildren
const AppContextProvider = (props: PropsWithChildren<{}>) => {
  const [userstate, setUserState] = useState<IUser>(defaultUser);

  const login = (useremail: string) => {
    setUserState({ email: useremail, isAuthorized: true });
  };

  const logout = () => {
    setUserState({ email: "", isAuthorized: false });
  };

  const updateEmail = (email: string) => {
    setUserState({ ...userstate, email }); // 修正逻辑，使用传入的email参数
  };

  return (
    <AppContext.Provider value={{ userstate, login, logout, updateEmail }}>
      {props.children}
    </AppContext.Provider>
  );
};
export default AppContextProvider;

额外说明 #

• 避免使用String类型，优先用string基本类型，符合TypeScript常规用法。
• 变量和组件名遵循驼峰命名规范，提升代码可读性。
• updateEmail方法修正了原逻辑中错误的赋值，保证方法名和功能一致。

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