解决AntDesignPro项目复制后useContext报null问题-CSDN博客

本文链接：https://blog.csdn.net/qq_36708269/article/details/149216634

报错信息:

TypeError: Cannot read properties of null (reading 'useContext') useContext http://localhost:9999/mf-dep____vendor.38258c6c.js:500995:21 (anonymous function) http://localhost:9999/mf-dep____vendor.38258c6c.js:276917:72 (anonymous function) http://localhost:9999/mf-dep____vendor.38258c6c.js:276322:19 AvatarDropdown .ant-design-pro/src/components/RightContent/AvatarDropdown.tsx:60 57 | }); 58 | } 59 | }; > 60 | const { styles } = useStyles(); | ^ 61 | 62 | const { initialState, setInitialState } = useModel('@@initialState'); 63 | View compiled ▶ 17 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

错误信息表明在调用 useContext 时遇到了 null 值，这通常是由于组件上下文未正确初始化或依赖关系混乱导致的。结合 Ant Design Pro 的项目特性和你的复制操作，以下是系统化的解决方案：

⚠️ 核心问题定位

**.umi 缓存未更新**
复制项目后，原构建缓存（src/.umi）未清除，导致新旧配置冲突，组件上下文丢失。
Node.js 版本或依赖冲突
新环境可能使用了不兼容的 Node 版本（如 v17+），或依赖未完整安装，导致 React Hooks 执行异常。
初始状态未正确注入
initialState（通过 useModel('@@initialState') 访问）在渲染前未初始化，导致 useContext 读取失败。

🛠️ 分步解决方案

1. 清除项目缓存（关键步骤）

# 删除构建缓存（PowerShell 命令）
rm -r -fo .umi, node_modules, package-lock.json

# 重新安装依赖（使用 --legacy-peer-deps 规避依赖冲突）
npm install --legacy-peer-deps

注意：

若文件被占用（如 IDE 未关闭），先关闭 VS Code 等工具再执行删除。
Windows 系统若提示权限不足，以管理员身份运行 PowerShell。

2. 检查 Node.js 环境

node -v  # 推荐 v16.x（LTS 版本）
npm -v   # 推荐 8.x+

不兼容高版本的修复：

降级到 Node v16：使用 nvm use 16。

或添加环境变量：

# Windows
set NODE_OPTIONS=--openssl-legacy-provider
# macOS/Linux
export NODE_OPTIONS=--openssl-legacy-provider

3. 修复初始化状态逻辑

在 src/components/RightContent/AvatarDropdown.tsx 中，确保 initialState 已加载后再调用 useStyles()：

// 修改前（易触发 null 错误）
const { styles } = useStyles(); // 依赖上下文可能未就绪
const { initialState } = useModel('@@initialState');

// 修改后：先确保 initialState 存在
const { initialState } = useModel('@@initialState');
if (!initialState) return null; // 或加载状态占位符
const { styles } = useStyles();

原理：Ant Design Pro 的 @@initialState 模型需异步加载，直接访问可能为 null。

4. 检查路由配置冲突

若登录后仍白屏，排查 config/routes.ts 中的动态路由：

// 注释非常规路由（如需权限验证的路由）
// { path: '/admin', access: 'canAdmin', component: './Admin' },

复制项目时路由权限配置可能失效，导致渲染中断。

🔍 进阶排查

浏览器插件干扰
禁用 React Developer Tools 等插件（已知 v3.x 会破坏上下文）。
依赖版本锁定
使用 npm ci（替代 npm install）严格按 package-lock.json 安装依赖。
模块联邦冲突
错误中的 mf-dep____vendor... 表明微前端依赖未正确加载，尝试重装 @umijs/plugin-qiankun。

✅ 预防措施

项目复制规范

git clone 原项目地址   # 替代文件复制
rm -rf .umi           # 新环境必删缓存

统一环境
通过 .nvmrc 指定 Node 版本：
```
echo "16.20.2" > .nvmrc
nvm use
```
关键依赖显式声明
在 package.json 固定核心库版本：
```
"react": "^18.2.0",
"@ant-design/pro-components": "1.4.3"
```