Next.js中出现Cannot find namespace 'AppContext'错误的问题求助

我之前也碰到过一模一样的问题——明明已经正确导出了Context，TS却死活找不到它。别着急，这种错误大多是导入、配置或者缓存的小问题，咱们一步步排查解决：

1. 先检查导入语句有没有写错 #

这是最常见的原因！因为你用的是命名导出（export const AppContext），所以使用的地方必须用花括号包裹着导入，而且路径要准确：

// 正确的导入示例（根据你的文件路径调整）
import { AppContext } from '../contexts/AppContext';
// ❌ 错误：不能用默认导入，因为你没export default AppContext
// import AppContext from '../contexts/AppContext';

一定要确认路径层级对不对，比如如果你的组件在src/pages/Home.tsx，而Context在src/contexts/AppContext.tsx，那路径应该是../contexts/AppContext，别少写或者多写../。

2. 确认TypeScript配置是否覆盖了你的Context文件 #

打开项目根目录的tsconfig.json，检查两个关键点：

• compilerOptions.jsx：React 17+应该设置为react-jsx，旧版本可以用react
• include数组：确保它包含了你存放Context的目录，比如"include": ["src/**/*"]，这样TS才会扫描到你的Context文件

如果配置不对，TS可能根本没解析你的Context文件，自然找不到它。

3. 检查文件扩展名是否正确 #

你的AppContextProvider返回了JSX代码，所以这个文件的扩展名应该是.tsx，而不是.ts。如果用了.ts扩展名，TS可能无法正确解析JSX语法，导致导出的AppContext没被正确识别。

4. 重启TypeScript服务（VS Code专属） #

VS Code的TS服务有时候会抽风缓存旧的类型信息，明明代码没问题却报错。试试：

• 按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板
• 搜索并选择TypeScript: Restart TS Server
• 要是还不行，直接重启VS Code，清理一下缓存

5. 排查命名冲突 #

看看你的项目里有没有其他文件也叫AppContext，或者在使用Context的组件里，有没有定义同名的变量/类型。比如如果组件里有const AppContext = ...，那会覆盖你导入的Context，导致TS找不到正确的那个。

如果上面的步骤都试过还是没解决，你可以贴出使用AppContext的代码片段，这样能更精准地定位问题。但大部分情况下，上面的几点就能搞定这个错误啦！

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