TypeScript 提示参数类型不兼容，如何解决 string|null 无法赋值给 string 的问题

看起来你碰到了TypeScript类型检查里很常见的空值不兼容问题，我来给你几个实用的解决思路，你可以根据自己的业务场景来选：

方法一：先做非空判断（最安全推荐） #

因为paramMap.get()可能返回null（比如路由里没传productId的时候），所以先判断productId存在再调用方法，同时还能处理无ID的异常场景：

private getSelectedProduct = () => {
  const productId = this.activatedRoute.snapshot.paramMap.get('productId');
  console.log('selectedProduct', productId)
  
  // 先确认productId不为null
  if (productId) {
    this.productService.getSelectedProduct(productId).subscribe(product => {
      this.selectedProduct = product;
    })
  } else {
    // 这里可以加业务逻辑，比如提示用户、跳转到产品列表页
    console.log('未获取到有效的产品ID');
    this.selectedProduct = undefined;
  }
}

这种方式完全符合TypeScript的类型安全要求，还能避免后续因为null引发的潜在bug，是最稳妥的做法。

方法二：使用非空断言（仅确定参数一定存在时用） #

如果你能100%保证路由里的productId参数肯定存在，不会出现null的情况，可以用非空断言!告诉TypeScript这个值一定不是null：

private getSelectedProduct = () => {
  const productId = this.activatedRoute.snapshot.paramMap.get('productId');
  console.log('selectedProduct', productId)
  
  // 用!断言productId不为null
  this.productService.getSelectedProduct(productId!).subscribe(product => {
    this.selectedProduct = product;
  })
}

⚠️ 注意：如果运行时productId真的是null，这种写法会导致后续代码出错，所以一定要确保参数必然存在的时候再用！

方法三：修改服务方法的参数类型（允许接收null） #

如果你的getSelectedProduct方法本身就需要处理productId为null的情况，可以直接修改它的参数类型为string | null，把空值处理逻辑放到服务层：

修改后的服务方法：

public getSelectedProduct = (productId: string | null) => {
  // 先处理productId为null的情况
  if (!productId) {
    return of(undefined);
  }
  const product = this.productSignal().products.find(product => product._id === productId)
  return of(product)
}

这样调用方就不用额外做判断了，空值的处理逻辑统一放在服务里，适合需要全局处理这类场景的情况。

补充下为什么会报错：paramMap.get('productId')的返回类型是string | null，这是TypeScript的设计——当路由参数不存在时会返回null；而你的getSelectedProduct方法要求参数必须是string，类型检查就会拦截这个潜在风险，防止你把null传入需要字符串的方法里。

备注：内容来源于stack exchange，提问作者koque