React useImperativeHandle返回null时触发TS类型报错如何解决？

useImperativeHandle 基本作用 #

React 提供的 useImperativeHandle 用于自定义子组件暴露给父组件的 ref 实例内容，避免父组件直接拿到子组件的完整 DOM 节点，仅暴露需要的属性、方法即可，属于控制 ref 对外暴露范围的 Hook。

报错根因 #

你声明 const menuItemRef = useRef<HTMLLIElement>(null) 时，初始值为 null，TS 会自动推断这个 ref 的 current 属性类型为 HTMLLIElement | null。但你传入 useImperativeHandle 的第一个参数 ref 的泛型约束是 Ref<HTMLLIElement>，要求返回值必须是 HTMLLIElement 类型、不能为 null，二者类型不匹配就触发了 TS 报错。

而第二段写法没有报错，是因为第二个参数 containerRefProp 的类型定义是 Ref<HTMLDivElement | null>，允许返回 null，类型匹配自然不会报错。

修复方案 #

• 方案一：添加非空断言（最常用）
  如果你能确定组件挂载完成后，menuItemRef.current 一定会被赋值为真实的 DOM 节点、不会为 null，可以直接加非空断言标记：

  useImperativeHandle(ref, () => menuItemRef.current!)
  

• 方案二：调整 ref 类型
  如果业务场景允许 ref 取值为 null，可以修改传入 useImperativeHandle 的第一个参数 ref 的类型定义，把泛型调整为 Ref<HTMLLIElement | null>，即可匹配类型。

• 方案三：添加兜底返回
  如果需要避免返回 null，也可以加兜底逻辑：

  useImperativeHandle(ref, () => menuItemRef.current ?? document.createElement('li'))
  

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