TypeScript React非受控组件useRef报Object possibly null错误如何解决

错误原因 #

TypeScript 抛出Object is possibly 'null'.ts(2531)错误的根本原因是：你定义的RefObject类型中current属性的联合类型包含null，TS 无法保证你调用alertValue方法时，inputRef.current已经被成功赋值为输入框DOM实例，所以触发了空值校验提醒。

可选解决方案 #

• 方案1：使用可选链操作符（最简便）
  直接在取值时加?可选链标识符，当inputRef.current为null时会直接返回undefined，不会抛出运行时错误，同时符合TS类型校验规则：

  function alertValue() {
      alert(inputRef.current?.value);
  }
  

• 方案2：使用非空断言（适合确定ref一定有值的场景）
  你可以确定点击按钮时input已经完成挂载、ref一定有值的话，可以加!非空断言，主动告诉TS此处一定不为null，跳过类型校验：

  function alertValue() {
      alert(inputRef.current!.value);
  }
  

• 方案3：添加运行时空值判断（最稳妥，无运行时风险）
  先判断inputRef.current是否存在，再进行后续操作，兼顾类型校验和运行时安全：

  function alertValue() {
      const inputDom = inputRef.current;
      if (inputDom) {
          alert(inputDom.value);
      }
  }
  

额外优化建议 #

你自定义的RefObject接口和React官方导出的同名接口定义完全一致，不需要额外声明，直接使用React内置的类型即可，ref定义可以简化为：

const inputRef = useRef<HTMLInputElement>(null);

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