向React函数组件传递ReactNode数组时的TypeScript类型检查错误

• 直接给props标any类型：会被ESLint规则拦截，触发Object pattern argument should be typed with a non-any type警告，因为这种写法完全放弃了TS的类型校验能力，规则要求解构的对象参数必须绑定明确的非any类型
• 把入参整体标为Array：是类型层级完全写反了。这种写法相当于告诉TS，组件接收的整个props参数本身就是一个数组，自然会抛出Property 'dropDownOptions' does not exist on type 'any[]'的报错——本质是把“dropDownOptions属性的类型是数组”误写成了“整个props的类型是数组”

按照React配合TypeScript的常规写法，不需要在解构参数的位置硬写类型，优先独立定义组件的Props类型结构，步骤如下：

1. 从React中导入需要用到的ReactNode类型
2. 为Dropdown组件定义独立的Props类型，明确指定dropDownOptions的类型为ReactNode组成的数组
3. 将定义好的Props类型绑定到组件的入参上

参考实现代码：

import { ReactNode } from 'react';

// 独立定义Props结构，后续拓展新属性也方便维护
type DropdownProps = {
  // 类型和getOptions的返回值完全匹配，不存在兼容问题
  dropDownOptions: ReactNode[];
}

// 绑定Props类型后，既满足TS类型校验要求，也不会触发ESLint警告
const Dropdown = ({ dropDownOptions }: DropdownProps): JSX.Element => {
  // 组件内部业务逻辑
}

• 业务场景如果存在dropDownOptions可不传的情况，可以给属性加可选标记?，即dropDownOptions?: ReactNode[]，同时在组件内部设置默认值兜底，避免运行时取值报错
• 原代码里getOptions的逻辑可以做轻量化简化：不需要先声明空数组，再用map遍历逐个push，直接返回map生成的新数组即可，逻辑等价还更简洁

// 简化后的getOptions实现
const getOptions = (links: Array<Links>): Array<ReactNode> => {
  return links.map((link) => (
    <Link
      href={link.path}
      key={link.page}
    >
      {link.label}
    </Link>
  ));
};

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