使用TypeScript的useRef时遭遇索引签名错误求助

问题根源 #

1. 接口类型定义错误：你定义的listRefObj指定值为string，但ref回调接收的el是HTMLDivElement | null（DOM元素或组件卸载时的null），类型完全不匹配。
2. useRef类型未正确指定：如果初始化时未明确泛型，listRef.current会被推断为{} | listRefObj联合类型，空对象{}没有索引签名，导致报错。

修正步骤 #

1. 修正接口定义：将值类型改为对应DOM元素类型：

interface ListRefObj {
  [key: string]: HTMLDivElement | null;
}

2. 正确初始化useRef：指定泛型并传入初始空对象：

const listRef = useRef<ListRefObj>({});

3. 完善ref回调逻辑：处理el为null的情况（组件卸载时会触发该场景）：

<div 
  ref={(el) => {
    if (el) {
      listRef.current[v.name] = el;
    } else {
      // 可选：卸载时移除对应属性，避免内存泄漏
      delete listRef.current[v.name];
    }
  }}
>
  {v.name}
</div>

解决原理 #

• 修正后的接口匹配了ref实际存储的DOM元素类型，消除了类型不兼容问题。
• 明确useRef的泛型后，listRef.current的类型固定为ListRefObj，具备字符串索引签名，解决了索引访问的报错。

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