如何在TypeScript中结合createContext传递状态变量并解决TS2554错误

错误原因 #

TypeScript版本的createContext必须传入符合上下文类型的默认值（或通过泛型明确类型并配合合理默认值），因为TS需要明确上下文的类型信息，而JS版本可以省略默认值，这是两者的核心差异。

修复步骤及代码 #

1. 定义上下文类型 #

先明确NavContext的value类型，对应要传递的状态和状态修改函数：

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

// 定义NavContext的类型
type NavContextType = {
  isDrawerOpen: boolean;
  setIsDrawerOpen: Dispatch<SetStateAction<boolean>>;
};

2. 创建带默认值的上下文 #

给createContext传入符合上述类型的默认值，让TS识别上下文类型，同时消除错误：

// 创建上下文并传入默认值
export const NavContext = createContext<NavContextType>({
  isDrawerOpen: false,
  setIsDrawerOpen: () => {}, // 空函数作为默认的状态修改器
});

3. 修正NavBar组件的类型定义 #

组件的props类型可以简化，直接声明children的可选类型：

const NavBar: ReactFC<{ children?: ReactNode }> = ({ children }) => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  return (
    <NavContext.Provider value={{ isDrawerOpen, setIsDrawerOpen }}>
      <AppBar position="static">{children}</AppBar>
    </NavContext.Provider>
  );
};

补充说明 #

如果不想传入真实的默认值，也可以用类型断言（但不推荐，因为使用useContext时需要处理可能的undefined）：

export const NavContext = createContext<NavContextType | undefined>(undefined);

这种方式下，使用useContext时需要加上非空断言或判断：

const { isDrawerOpen, setIsDrawerOpen } = useContext(NavContext)!;

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