使用Creative Tim Dark React模板出现TypeError: Cannot read properties of null (reading '1')报错

报错根因 #

TypeError: Cannot read properties of null (reading '1') 表示代码中尝试对null值执行取索引为1的操作，90%以上的场景出现在以下代码逻辑中：

• 对拆分后返回null的字符串执行split()后直接取索引
• 对null值执行数组解构，取第二个返回值
• 正则匹配返回null后直接取匹配结果的第二位

针对Creative Tim Dark React模板的专属排查步骤 #

• 首先检查侧边栏路由配置文件（通常为src/routes.js或者src/sidebar-routes.js），是否存在路由路径、图标配置不符合模板要求的空值/异常格式
• 检查你修改过的主题配置文件，是否存在颜色配置、断点配置的字符串拆分逻辑错误，模板内置的颜色值解析逻辑会拆分十六进制颜色值，若你传入的颜色值为null就会触发该报错
• 若你修改了登录/用户信息相关逻辑，检查用户角色、权限字段的取值逻辑，若用户信息返回为null时，模板内置的权限判断逻辑拆分权限字段时会触发该错误

快速修复方案 #

1. 开启浏览器源码定位，在报错栈中找到第一个属于你的项目源码的文件位置，查看对应行是否存在类似xxx.split('xxx')[1]、xxx.match(xxx)[1]或者const [a, b] = xxx的写法，提前对xxx做非空判断：

// 错误写法
const suffix = str.split('-')[1]
// 正确写法
const suffix = str?.split('-')?.[1] ?? '默认值'

2. 若你未修改过模板核心代码，直接将你最近新增/修改的路由配置、主题配置还原到上一个可用版本，即可快速定位异常配置项。

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