React Context+TypeScript报错：类型'Admin'无法赋值给类型'boolean'

核心问题 #

你的AdminContextInterface中admin属性的类型定义和实际状态类型不匹配：

• AdminContextInterface里声明admin: boolean，但组件中useState<Admin>({ admin: false })维护的是**Admin类型的对象**（即包含admin布尔字段的对象），两者类型冲突，导致TypeScript报错。

修复步骤 #

1. 修正AdminContextInterface的类型定义
   将admin属性的类型从boolean改为Admin，和状态类型保持一致：

   export interface AdminContextInterface {
       admin: Admin; // 替换原有的boolean类型
       setAdmin: Dispatch<SetStateAction<Admin>>;
   }
   

2. 修正默认状态的admin值
   默认状态的admin需要从布尔值false改为Admin类型的对象：

   const defaultState = {
       admin: { admin: false }, // 替换原有的false
       setAdmin: (admin: Admin) => {},
   } as AdminContextInterface;
   

修复后完整代码 #

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

export type Admin = {
    admin: boolean;
};

export interface AdminContextInterface {
    admin: Admin;
    setAdmin: Dispatch<SetStateAction<Admin>>;
}

const defaultState = {
    admin: { admin: false },
    setAdmin: (admin: Admin) => {},
} as AdminContextInterface;

export const AdminContext = createContext(defaultState);

export type AdminContextProviderProps = {
    children: ReactNode;
};

export const AdminContextProvider = ({
    children,
}: AdminContextProviderProps) => {
    const [admin, setAdmin] = useState<Admin>({ admin: false });
    return (
        <AdminContext.Provider value={{ admin, setAdmin }}>
            {children}
        </AdminContext.Provider>
    );
};

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