React TypeScript中传递数组作为NavDropdown组件Props的报错问题

错误原因拆解 #

1. Property 'map' does not exist on type 'SubItemsProps'：你把subItems的类型定义成了SubItemsProps（一个包含数组的对象），但实际要传递的是数组本身，对象自然没有map方法。
2. Parameter 'subItem' implicitly has an 'any' type：因为subItems的类型错误，TypeScript无法推断subItem的具体类型，所以默认隐式为any。

另外你的DropdownItem接口字段和实际传入的DropDownItems结构不匹配（接口用subTitle/subLink，传入的是title/to），这会导致后续渲染时字段取不到值，需要一并修正。

修正后的完整代码 #

// 对齐传入的字段结构，定义正确的下拉项类型
interface DropdownItem {
  title: string;
  to: string;
}

const NavDropdown = ({
  title,
  subItems
}: {
  title: string;
  // 直接将subItems定义为DropdownItem数组，移除多余的SubItemsProps类型
  subItems: DropdownItem[];
}) => {
  return (
    <div>
      <div>{title}</div>
      <div>
        <ul>
          {/* 现在subItem有明确类型，不会再提示隐式any */}
          {subItems.map((subItem, index) => (
            <Link key={index} href={subItem.to}>
              <li>
                <span>{subItem.title}</span>
              </li>
            </Link>
          ))}
        </ul>
      </div>
    </div>
  );
};

额外优化说明 #

• 给列表项加上key属性，符合React列表渲染的规范要求。
• 移除了冗余的SubItemsProps类型，简化类型定义结构。

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