Angular使用queryParamMap赋值token出现类型不匹配报错怎么解决？

报错根因 #

• ParamMap.get() 方法的原生返回类型为 string | null，即使提前调用 ParamMap.has() 确认参数存在，TypeScript 也无法自动关联两次调用的类型关系，因此 value.get('token') 会被推断为 string | null，和声明的 token?: string（仅支持 string | undefined 类型）不匹配，触发类型报错。
• 现有代码中 userId 未报错是因为多余的!运算符把返回值强制转成了布尔值再转数字，最终结果固定为0/1，刚好符合number类型要求，但实际上该写法存在逻辑错误，无法拿到正确的用户ID数值。

修复代码 #

以下修改会对齐参数读取的正常逻辑，同时解决类型报错：

userId?: number;
token?: string;

constructor(private route: ActivatedRoute) { 

  this.route.queryParamMap.subscribe(
    (value: ParamMap) => {
      // 去掉多余的!运算符，添加非空断言!告知TS返回值不为null
      this.userId = value.has('userId') ? +value.get('userId')! : undefined;
      // 对token的get结果添加非空断言!消除null类型
      this.token = value.has('token') ? value.get('token')! : undefined;
    }
  );

}

可选兼容方案 #

如果不想使用非空断言，也可以通过空值合并运算符自动处理null场景：

this.route.queryParamMap.subscribe(
  (value: ParamMap) => {
    this.userId = value.get('userId') ? +value.get('userId')! : undefined;
    this.token = value.get('token') ?? undefined;
  }
);

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