TypeScript提示对象可能为null但上下文确认对象不可能为空是什么原因？

问题根因 #

这个报错的核心是 TypeScript 无法感知 React 运行时的 ref 挂载逻辑，且你没有为useRef显式指定类型导致的：
当你初始化useRef(null)时，TypeScript 会默认推导这个 ref 的类型为React.MutableRefObject<null>，会认为它的current属性永远只能是null，哪怕后续 React 会把真实的 input DOM 元素挂载到这个 ref 上，TS 也没法识别这个运行时的行为。你写的inputRef.current非空判断也不会触发类型收窄，因此依旧会抛出空值报错。

解决方案 #

你可以根据自己的使用场景选以下任意一种方案解决：

• 方案1：给useRef显式声明泛型类型，明确告诉 TypeScript 这个 ref 未来会挂载的 DOM 类型

// 泛型里声明current可以是HTMLInputElement或者null
const inputRef = useRef<HTMLInputElement | null>(null)

加上这个声明后，你原有的非空判断逻辑就会触发 TS 的类型收窄，if判断块内的inputRef.current会被识别为HTMLInputElement类型，不会再报错。

• 方案2：用非空断言操作符!跳过类型校验
  如果你确定checkValidity触发的时候inputRef.current一定已经挂载了 DOM 元素，可以直接在调用方法前加!告诉 TS 这个值不可能为空：

const valid = inputRef.current!.checkValidity()

• 方案3：用可选链操作符?.兼容空值场景
  你也可以直接用可选链调用方法，哪怕current为空也不会触发运行时报错，同时可以通过 TS 的类型校验：

const valid = inputRef.current?.checkValidity()

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