Angular12中将路由参数转换为可为空数字类型的报错如何解决

1. 路由paramMap获取的参数默认类型为string | null，和UserModel中id要求的number | undefined类型不匹配，触发第一次类型报错
2. 调整写法后触发新报错的核心原因有两个：一是has判断的参数名userId和实际需要取值的id不一致，二是get方法前加了不必要的可选链?，TypeScript 无法识别你已经通过has判断了参数存在，所以仍然判定值可能为null

方法1：极简修正写法（适合单一场景） #

已经通过has判断参数存在的前提下，移除不必要的可选链，搭配非空断言操作符!告知TypeScript当前取值一定不为空，再做数字转换即可，同时注意UserModel中的email为必填字符串类型，不要赋值undefined：

ngOnInit() {
  this.route.paramMap.subscribe(
    (value: ParamMap) => { 
      this.user = { 
        id: value.has('id') ? +value.get('id')! : undefined,
        email: value.has('email') ? value.get('email')! : ''
      }
    });
}

方法2：无断言安全写法 #

如果不想使用非空断言，可以用空值判断配合Number转换实现类型兼容：

id: value.get('id') ? Number(value.get('id')) : undefined,
email: value.get('email') ?? ''

方法3：复用型工具函数封装 #

如果项目中频繁需要从路由取不同类型的参数，可以封装通用转换工具减少重复代码：

// 全局工具文件中定义
export function getNumberParam(paramMap: ParamMap, key: string): number | undefined {
  const val = paramMap.get(key);
  return val ? Number(val) : undefined;
}

export function getStringParam(paramMap: ParamMap, key: string, defaultValue = ''): string {
  return paramMap.get(key) ?? defaultValue;
}

// 组件内调用
ngOnInit() {
  this.route.paramMap.subscribe(
    (value: ParamMap) => { 
      this.user = { 
        id: getNumberParam(value, 'id'),
        email: getStringParam(value, 'email')
      }
    });
}

• 路由所有参数的默认返回值都是字符串类型，数字类型必须手动转换后才能赋值给对应类型的变量
• 注意检查路由配置中定义的参数名和代码中取值的参数名是否完全一致，避免参数名不匹配导致的空值问题
• 如果业务逻辑要求email为必填项，建议增加参数缺失的兜底逻辑，比如跳转错误页或者提示用户参数异常

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