TypeScript配合React useState使用时null无法赋值给number类型如何解决

你遇到的报错是两个原因共同导致的：

1. isNaN的隐式类型转换逻辑不符合你的预期：isNaN(null)会返回false（因为null会被隐式转换为数字0），所以你现在写的!isNaN(accountData.country)判断是拦不住null值的，逻辑本身就有漏洞。
2. TypeScript不会将isNaN()的执行结果作为类型收窄的依据，所以就算你加了这个判断，TS还是认为accountData.country可能为null，不会把它的类型收窄为number。

接下来给几个可行的解决方案，你可以根据自己的场景选：

方案1：用TS能识别的原生判断做类型收窄 #

先通过typeof判断类型为number，再校验是否为NaN，TS可以自动识别这种判断完成类型收窄，不会再报错：

onClick={() => {
  const country = accountData.country;
  if (typeof country === 'number' && !isNaN(country)) {
    handleSubmit(country);
  }
}}

方案2：用非空断言（适合确认逻辑不会传非法值的场景） #

如果你能保证触发点击事件时accountData.country一定是合法的数字，可以直接加!非空断言告诉TS这个值不可能是null/undefined：

onClick={() => {
  handleSubmit(accountData.country!);
}}

方案3：自定义类型守卫（适合多处需要校验的场景） #

如果多个地方都要做country合法性校验，可以封装一个类型守卫函数，复用性更高：

function isValidCountry(val: unknown): val is number {
  return typeof val === 'number' && !isNaN(val);
}

// 调用处
onClick={() => {
  if (isValidCountry(accountData.country)) {
    handleSubmit(accountData.country);
  }
}}

另外注意你提到country实际还可能为undefined、空字符串，当前你定义的AccountData接口里只声明了number | null两种类型，和实际情况不符，建议先调整接口定义避免后续出现隐藏的类型问题：

interface AccountData {
  country: number | null | undefined | string;
}

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