路由配置中的空指针异常处理实战技巧

路由跳转时的常见崩溃场景

开发中常遇到用户点击按钮后页面直接卡死，控制台报出 NullPointerException。比如从首页跳转到用户详情页时，传了个 null 的用户 ID，后续代码没做判空，一调用 getId() 就崩。

这种情况在前端路由和后端接口联动时特别容易出现。尤其是动态路由，参数解析失败或未传递，很容易让对象保持初始 null 状态。

别等崩溃才想起来判空

很多人习惯写完逻辑再补空值判断，结果漏掉一两个就埋下隐患。更稳妥的做法是在路由进入的第一时间处理可能的空值。

比如在 Vue 的 beforeEach 钩子中：

router.beforeEach((to, from, next) => {
  const userId = to.params.userId;
  if (!userId) {
    console.warn('用户ID为空，跳转默认页');
    return next('/home');
  }
  next();
})

后端接口返回也要防住 null

前端路由接收到数据后，如果依赖后端返回的配置信息，比如菜单结构，而接口恰好返回了 null，直接遍历就会炸。

写法上可以简单粗暴：

const menus = res.data.menus || [];
menus.forEach(item => {
  // 安全遍历
})

或者用可选链：

res.data?.menus?.forEach(item => {
  // 即便前面是 null 也不会报错
})

利用默认值减少空指针风险

定义路由参数时，给关键字段设置默认值，能有效避免后续处理出错。比如 React Router 中：

const userId = params.userId ?? 'default';

或者在 Vuex 或 Pinia 中初始化状态时，确保对象结构完整，不留下裸露的 null 字段。

真实场景：订单页加载闪退

有次上线后收到反馈，订单详情页偶尔白屏。查日志发现是 route.query.orderId 是 null，代码里直接传给了 useOrderDetail(orderId)，内部发起请求时拼接 URL 出了问题。

修复方式很简单，在调用前加一层校验：

const orderId = route.query.orderId;
if (!orderId) {
  redirect('/error');
  return;
}

加上之后，问题再没复现。

小改动，大稳定

空指针异常不是多难的技术问题，更多是细节疏忽。在路由这一层把好关，等于给整个应用加了缓冲垫。别指望下游去兜底，最上游拦截最省事。