React useContext调用ToggleContext返回undefined报错排查

报错根因 #

调用useContext(ToggleContext)时，上层组件树中未匹配到对应ToggleContext.Provider，useContext返回值为undefined，解构toggle属性时触发类型错误。

具体排查点 #

• 校验ToggleContext.js的导出逻辑，确认和正常运行的ThemeContext.js完全对齐，无拼写错误：
  标准Context实现示例：

  import { createContext } from 'react';
  
  // 默认值可传空，只要Provider覆盖就不会生效
  const ToggleContext = createContext(undefined);
  export const ToggleProvider = ({ children, value }) => {
    return <ToggleContext.Provider value={value}>{children}</ToggleContext.Provider>
  };
  export default ToggleContext;
  

• 校验Layout.js/根组件的Provider嵌套层级，确认ToggleProvider的包裹范围完全覆盖Navbar组件所在的组件树，不要出现仅嵌套ThemeProvider、遗漏ToggleProvider的情况，正确嵌套示例：

  <ToggleProvider value={{ toggle: 你的切换方法, isOpen: 你的状态变量 }}>
    <ThemeProvider>
      <Layout>
        {/* Navbar在Provider内部，调用useContext可正常取值 */}
        <Navbar />
      </Layout>
    </ThemeProvider>
  </ToggleProvider>
  

• 校验Navbar.js的导入路径，确认导入的ToggleContext是你创建的对应实例，无路径写错、导错Context的问题。
• 如果你封装了自定义useToggle hook，建议增加上下文存在性判断，可快速定位Provider缺失问题：

  import { useContext } from 'react';
  import ToggleContext from './ToggleContext';
  
  export const useToggle = () => {
    const context = useContext(ToggleContext);
    if (!context) {
      throw new Error('useToggle must be used inside ToggleProvider');
    }
    return context;
  };
  

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