React+TypeScript中useContext无法访问MenuBarContext求助

错误核心是作用域问题——MenuBarContext被定义在App函数组件内部，导致外部的Navbar组件无法访问到这个Context变量。以下是具体修正方案：

步骤1：将Context定义移到组件外部 #

把MenuBarContext的创建代码抽离到App组件外部的顶层作用域，同时优化TypeScript类型（替换any为标准Dispatch类型），并导出Context供其他组件使用：

import React, { createContext, useState, Dispatch, SetStateAction } from 'react';
import { Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import HomePage from './HomePage';

// 定义MenuBar类型，明确setMenu的类型
type MenuBar = {
  menu: boolean;
  setMenu: Dispatch<SetStateAction<boolean>>;
};

// 在组件外部创建Context，初始值设为undefined
const MenuBarContext = createContext<MenuBar | undefined>(undefined);

function App() {
  const [menu, setMenu] = useState<boolean>(false);
  
  return (
    <MenuBarContext.Provider value={{ menu, setMenu }}>
      <div className="h-full font-primary-400">
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </Router>
      </div>
    </MenuBarContext.Provider>
  );
}

// 导出Context，供其他组件导入
export { MenuBarContext };
export default App;

步骤2：在Navbar组件中导入并安全使用Context #

在Navbar组件中先导入MenuBarContext，添加类型守卫避免undefined的运行时错误，再解构使用状态和方法：

import React, { useContext } from 'react';
import { MenuBarContext } from './App';

const Navbar = () => {
  const context = useContext(MenuBarContext);
  
  // 强制组件必须在Provider内部使用，抛出明确错误便于调试
  if (!context) {
    throw new Error('Navbar must be used within a MenuBarContext.Provider');
  }
  
  const { menu, setMenu } = context;
  
  return (
    <nav>
      <button onClick={() => setMenu(!menu)}>
        {menu ? '关闭菜单' : '打开菜单'}
      </button>
    </nav>
  );
};

export default Navbar;

额外说明 #

• 替换setMenu: any为Dispatch<SetStateAction<boolean>>，这是React useState返回setter的标准TypeScript类型，避免any带来的类型不安全问题。
• 给Context设置undefined初始值并配合类型守卫，能在组件误用（未放在Provider内）时快速定位问题。

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