跟随YouTube教程将React项目从JS转TS时遇useContext问题，求协助

我跟着React教程将项目从JavaScript转为TypeScript时，在useContext的使用上遇到了问题，原JavaScript代码如下：

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

const StateContext = createContext();

export const ContextProvider = ({ children }) => {
    const [activeMenu, setActiveMenu] = useState(true);

    return (
        <StateContext.Provider value={{activeMenu, setActiveMenu}}>
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

改造后的TypeScript版本 #

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

// 定义Context值的类型
type ContextState = {
  activeMenu: boolean;
  setActiveMenu: React.Dispatch<React.SetStateAction<boolean>>;
};

// 初始化Context时传入符合类型的默认值
const StateContext = createContext<ContextState>({
  activeMenu: true,
  setActiveMenu: () => {},
});

// 给Provider的props指定类型
export const ContextProvider = ({ children }: { children: ReactNode }) => {
  const [activeMenu, setActiveMenu] = useState(true);

  return (
    <StateContext.Provider value={{ activeMenu, setActiveMenu }}>
      {children}
    </StateContext.Provider>
  );
};

// 封装类型安全的useContext钩子
export const useStateContext = () => useContext(StateContext);

关键改造点说明 #

• 类型定义：通过ContextState明确Context值的结构，包括activeMenu的布尔类型，以及setActiveMenu对应的React状态更新函数类型，让TS能正确推导类型。
• 默认值初始化：TypeScript要求createContext必须传入匹配类型的默认值，这里给setActiveMenu设置空函数兜底，避免组件未被Provider包裹时调用钩子出现类型错误。
• Props类型约束：给ContextProvider的children指定ReactNode类型，符合React组件子元素的类型规范。
• 类型安全的钩子：由于Context已定义类型，useContext会自动返回正确的类型，使用时能获得完整的代码提示和类型校验。

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