React TypeScript中ref.current已判空仍提示可能为null？传组件出错

问题原因 #

你明明做了null检查，但TypeScript仍报错，核心原因是setTimeout属于异步回调——TypeScript无法跟踪异步环境里inputRef.current的状态，哪怕你之前检查过非空，它也没法保证回调执行时current仍然是非null的。

解决方案 #

1. 提前保存current到变量（最稳妥） #

把检查后的current存到局部变量里，再在回调中使用这个变量，TypeScript就能确定它的非空类型：

const inputRef = React.useRef<HTMLInputElement>(null);
const onIconClick = () => {
  const currentInput = inputRef.current;
  if (currentInput) {
    setTimeout(() => currentInput.focus(), 0);
  }
};

2. 使用可选链操作符 #

如果能接受current为null时focus()静默失败的情况，可直接用可选链简化代码：

const inputRef = React.useRef<HTMLInputElement>(null);
const onIconClick = () => {
  setTimeout(() => inputRef.current?.focus(), 0);
};

3. 非空断言（谨慎使用） #

如果你能100%确认回调执行时inputRef.current一定存在，可以用非空断言!跳过检查，但要注意后续代码改动可能导致运行时报错：

const inputRef = React.useRef<HTMLInputElement>(null);
const onIconClick = () => {
  if (inputRef.current) {
    setTimeout(() => inputRef.current!.focus(), 0);
  }
};

关于你之前的错误写法 #

你把React.useRef<HTMLInputElement>(null)断言成MutableRefObject<HTMLDivElement>属于类型不匹配：你声明的是input元素的ref，却强制转为div元素的ref，传给子组件时类型自然不兼容。不需要做这种强行类型转换，保持ref的类型和对应的DOM元素一致即可。

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