Angular中出现TypeError: Cannot read property 'extras' of null错误求助

这个错误我太熟悉了，核心原因很直接：你通过this.router.getCurrentNavigation()获取到的navigation对象是null，所以当你尝试访问navigation.extras时就会抛出这个类型错误。

为什么navigation会是null？ #

主要有两种常见场景：

• 组件不是通过Angular Router的导航操作进入的（比如直接刷新页面、在浏览器地址栏输入URL访问），这时候getCurrentNavigation()无法捕获到活跃的导航过程，返回null。
• ngOnInit钩子执行时，导航已经完成了。getCurrentNavigation()只能在导航正在进行中的阶段获取到有效对象，导航完成后这个方法就会返回null。

解决方法 #

方法1：添加空值检查+改用ActivatedRoute获取state #

当页面刷新或者导航完成后，路由的state会被保留在ActivatedRoute的snapshot里，我们可以结合空值检查来兼容两种场景：

import { ActivatedRoute, Router } from '@angular/router';

// 构造函数注入依赖
constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit() {
  // 先尝试获取当前导航对象
  const navigation = this.router.getCurrentNavigation();
  let state;
  
  if (navigation?.extras?.state) {
    state = navigation.extras.state as { 
      api: string; 
      trace_id: string; 
      token_id: string; 
      hotel_code: string; 
      result_index: string; 
    };
  } else {
    // 如果导航对象是null，从ActivatedRoute的快照里取state
    state = this.route.snapshot.state as { 
      api: string; 
      trace_id: string; 
      token_id: string; 
      hotel_code: string; 
      result_index: string; 
    };
  }

  // 最后加一层空值保护，避免state也为null的情况
  if (state) {
    this.reqObj = {
      api: state.api,
      trace_id: state.trace_id,
      token_id: state.token_id,
      hotel_code: state.hotel_code,
      result_index: state.result_index
    };
  } else {
    // 处理state为空的情况，比如给默认值或者提示用户
    console.warn('没有获取到路由状态参数');
    this.reqObj = { api: '', trace_id: '', token_id: '', hotel_code: '', result_index: '' };
  }
}

方法2：使用可选链操作符简化空值判断 #

如果你的Angular版本支持ES2020+，可以用可选链?.和空值合并??来简化代码，让逻辑更清晰：

ngOnInit() {
  const navigation = this.router.getCurrentNavigation();
  // 先从导航对象取，取不到就从路由快照取，再取不到给默认空对象
  const state = navigation?.extras?.state ?? this.route.snapshot.state ?? {};
  
  this.reqObj = {
    api: state.api || '',
    trace_id: state.trace_id || '',
    token_id: state.token_id || '',
    hotel_code: state.hotel_code || '',
    result_index: state.result_index || ''
  };
}

方法3：确保导航时正确传递state #

另外还要检查跳转时的代码，确保你确实传递了state参数，比如：

// 跳转页面的代码示例
this.router.navigate(['/your-target-route'], {
  state: {
    api: 'your-api-url',
    trace_id: 'xxx',
    token_id: 'xxx',
    hotel_code: 'xxx',
    result_index: 'xxx'
  }
});

如果跳转时没传state，那不管怎么取都会是空的，这点也别忽略哦。

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