React自定义Select组件TypeScript泛型报错：数组索引类型问题求解

你的代码报错核心原因是用对象的属性键去索引数组：props.options是T[]类型（数组），而K是T对象的属性键，数组只能用数字索引，不能用对象的键，所以TypeScript抛出了2536错误。

修正方案 #

1. 优化类型定义，增强灵活性

把原本单一的K拆成两个独立的类型参数KValue和KLabel，分别对应值和标签的属性键，允许值和标签来自对象的不同字段，避免强制两者必须是同一个键。

2. 修正取值逻辑

针对数组中的每个T类型对象，用config指定的键去索引对象本身，而不是索引整个数组。

完整修正代码 #

import { PropsWithChildren } from 'react';

function ReactSelect<T, KValue extends keyof T, KLabel extends keyof T>(
  props: PropsWithChildren<{
    options: T[];
    value?: T[KValue];
    onChange?: (value: T[KValue]) => void;
    config: { keyOfValue: KValue; keyOfLabel: KLabel };
  }>
) {
  const { options, config, value, onChange } = props;

  // 生成下拉选项列表
  const renderOptions = () => {
    return options.map((option) => {
      const optionValue = option[config.keyOfValue];
      const optionLabel = option[config.keyOfLabel];
      // 原生select的value仅支持基本类型，若你的值是复杂类型需调整断言逻辑
      return (
        <option key={String(optionValue)} value={optionValue as unknown as string}>
          {optionLabel}
        </option>
      );
    });
  };

  // 获取当前选中值对应的标签
  const selectedLabel = options.find(
    (option) => option[config.keyOfValue] === value
  )?.[config.keyOfLabel];

  return (
    <div>
      <select 
        value={value as unknown as string} 
        onChange={(e) => onChange?.(e.target.value as T[KValue])}
      >
        {renderOptions()}
      </select>
      {selectedLabel && <span>当前选中：{selectedLabel}</span>}
    </div>
  );
}

// 使用示例
type User = { id: number; name: string; email: string };
const userOptions: User[] = [
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' },
];

// 传入config指定用id作为值，name作为标签
<ReactSelect<User, 'id', 'name'>
  options={userOptions}
  value={1}
  config={{ keyOfValue: 'id', keyOfLabel: 'name' }}
/>

关键说明 #

• 类型参数拆分：KValue和KLabel分别约束为T的属性键，支持值和标签来自不同字段，适配更多业务场景。
• 正确索引对象：所有取值操作都是针对数组中的单个option对象（option[config.keyOfValue]），而非直接索引数组，彻底解决TypeScript索引报错。
• 类型断言：原生<select>的value仅支持字符串、数字等基本类型，如果你的T[KValue]是复杂类型（如对象），需要结合业务场景调整断言或改用受控组件的自定义值处理逻辑。

内容的提问来源于stack exchange，提问作者R.M. Reza