React+TypeScript动态使用useRef绑定元素时出现TS类型错误

你的代码出现TypeScript错误的核心原因是：ref回调函数返回了赋值结果，但React要求ref回调要么返回void，要么返回一个清理函数。你使用的箭头函数(el) => (refs.current[i] = el)通过括号直接返回了赋值后的元素（可能是HTMLDivElement或null），不符合LegacyRef的类型约束。

修复后的完整代码 #

import React, { useRef } from "react";

export default function Test() {
  const divs = [1, 2, 3];
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  
  // 确保ref数组长度与列表元素一致，避免索引越界
  refs.current = Array(divs.length).fill(null);

  return (
    <>
      {divs.map((v, i) => (
        <div 
          key={v} // 列表渲染必须添加唯一key属性
          ref={(el) => { 
            refs.current[i] = el; 
            // 使用大包裹代码，确保函数返回void
          }}
        >
          test {v}
        </div>
      ))}
    </>
  );
}

关键修复说明 #

• 将ref回调的括号改为大括号，让函数无返回值，严格符合React的ref回调类型要求
• 给map生成的元素添加key属性，这是React列表渲染的强制规范
• 初始化ref数组长度与divs一致，避免后续操作时出现索引越界问题

错误类型详解 #

TypeScript抛出的错误本质是：

(el: HTMLDivElement | null) => HTMLDivElement | null 无法赋值给类型 LegacyRef<HTMLDivElement>

React规定ref回调函数的类型必须是(instance: HTMLDivElement | null) => void | (() => void)，你的函数返回了元素对象或null，违反了这个类型约束，因此触发报错。

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