使用useContext时出现Cannot find namespace 'SideNavContext'错误求助

我尝试使用useContext钩子，上下文与提供者文件代码如下：

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

interface SideNavContextType {
  isOpen: boolean;
  toggleSideNav: () => void;
}

export const SideNavContext = createContext<SideNavContextType>({
  isOpen: false,
  toggleSideNav: () => {},
});

export const useSideNav = () => {
  return useContext(SideNavContext);
};

export const SideNavProvider = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSideNav = () => {
    setIsOpen(!isOpen);
  };

  const value = {
    isOpen,
    toggleSideNav,
  };

  return (
    <SideNavContext.Provider value={value}>{children}</SideNavContext.Provider>
  );
};

在这一行代码处报错：

<SideNavContext.Provider value={value}>{children}</SideNavContext.Provider>

错误信息：Cannot find namespace 'SideNavContext'

解决方案 #

• 检查文件后缀：确保该文件的后缀是.tsx而非.ts。.ts文件默认不支持JSX语法解析，会把<SideNavContext.Provider>中的<>误判为类型断言或命名空间引用，触发报错。
• 配置tsconfig.json：确认tsconfig.json中的jsx字段设置正确，React 17+版本建议设为"react-jsx"，旧版本可设为"react"，保证JSX语法能被TypeScript正确识别。
• 重启TypeScript服务器：如果是编辑器（如VSCode）的类型检查缓存问题，可按Ctrl+Shift+P调出命令面板，输入Restart TS Server重启服务，清除缓存。
• 确认变量作用域：你的代码中SideNavContext已在SideNavProvider组件前正确声明，作用域没问题，但如果有代码拆分情况，需确保变量引用路径正确。

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