React中数组形式Ref的TypeScript类型定义问题求助

错误原因分析 #

你遇到的HTMLDivElement | null is not assignable to type Legacy<HTMLDivElement> | undefined错误，本质是现代React Ref（useRef返回的MutableRefObject）和旧版Legacy Ref类型不兼容。当你把useRef<HTMLDivElement | null>创建的Ref赋值给期望Legacy Ref类型的变量/属性时，就会触发这个类型校验错误。

解决方案 #

1. 正确初始化useRef的类型 #

确保useRef的类型包含null（因为初始化值是null），这是函数组件中使用Ref的标准写法：

// 正确：明确允许Ref值为HTMLDivElement或null
const containerRef = useRef<HTMLDivElement | null>(null);

2. 统一Ref类型，避免混用Legacy Ref #

如果你的组件是使用forwardRef封装的，要确保组件的Ref类型定义正确，不要使用Legacy类型：

import { forwardRef, Ref } from 'react';

interface ComponentProps {
  // 你的组件属性
}

// 明确指定Ref的目标元素类型为HTMLDivElement
const CloseOnOutsideClick = forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
  return <div ref={ref}>{props.children}</div>;
});

3. 必要时使用类型断言（谨慎使用） #

如果必须兼容旧的Legacy Ref场景，可以用类型断言临时解决，但这是兜底方案，优先推荐前两种方法：

const containerRef = useRef<HTMLDivElement | null>(null);
// 将现代Ref断言为Legacy类型
const legacyCompatibleRef = containerRef as Legacy<HTMLDivElement>;

针对你代码第127行的具体调整 #

看你代码里的dropdownRef，应该是初始化时类型定义不完整，改成：

const dropdownRef = useRef<HTMLDivElement | null>(null);

同时检查传递这个Ref的组件是否正确接收Ref<HTMLDivElement>类型，而不是Legacy类型，就能解决类型不匹配问题。

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