Angular中TypeScript filter基于路由参数匹配时返回空数组的问题

核心问题定位 #

• 第一处硬逻辑bug：filter回调缺失return语句
  Array.prototype.filter的工作规则是，遍历每个数组元素时，根据回调函数返回的真值/假值判断是否保留该元素。原代码中箭头函数使用花括号包裹逻辑块，内部仅完成了等值比较运算，没有通过return把比较结果传出，所有迭代都默认返回undefined（属于假值），自然会过滤掉全部元素得到空数组。
  这也能解释为什么你替换为硬编码gift.id == 22就能匹配到数据——大概率你做硬编码测试时去掉了原来包裹逻辑的花括号，触发箭头函数的隐式返回，补上了原来缺失的return环节，筛选流程就可以正常跑通。
• 第二处潜在异常：路由参数取值不符合预期
  硬编码值能得到正确匹配结果，说明gifts数据源本身没有问题，异常确实出在通过路由获取的this.id值上：
  • 如果路由配置中对应详情页的路径没有声明:id参数占位（比如路径写为path: 'details'而非path: 'details/:id'），params.get('id')会直接返回null，经过+null的类型转换后得到的数值是0，和Gift对象的id自然无法匹配。
  • 可以通过在订阅回调中打印日志的方式定位：分别打印原始参数值、类型转换后的数值，即可明确参数获取环节是否正常。

可落地修复方案 #

1. 修正filter的返回逻辑
   直接去掉回调的花括号，利用箭头函数的隐式返回特性传入比较结果，或显式补充return语句：

// 隐式返回写法，适配简单判断场景
this.currentGift = this.gifts.filter(gift => gift.id === this.id)[0]
// 显式返回写法，适配复杂筛选逻辑
this.currentGift = this.gifts.filter(gift => {
  return gift.id === this.id
})[0]

注意：filter方法返回的是匹配元素组成的数组，需要通过[0]取出单个Gift对象赋值给currentGift，避免赋值为数组类型和预期不符。
2. 增加路由参数的兜底校验
对参数为空、格式异常的场景做提前拦截，避免无效的类型转换和筛选逻辑：

ngOnInit(): void {
  this.currentRoute.paramMap.subscribe((params: ParamMap) => {
    const rawIdParam = params.get('id')
    // 参数缺失或无法转换为数字时，直接中断逻辑
    if (!rawIdParam || isNaN(+rawIdParam)) return
    
    this.id = +rawIdParam
    this.currentGift = this.gifts.filter(gift => gift.id === this.id)[0]
  })
}

3. 校验路由配置
   检查对应详情页的路由定义，确保路径中声明了id参数占位，示例配置：

{ path: 'details/:id', component: DetailsPageComponent }

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