React组件传参报错：Property 'map'不存在于'() => IterableIterator'类型

原代码 #

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

function App({keys}: string[]) {
  return (
    <div>
      {keys.map((key: string) => (
        <li>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

出现的错误 #

Property 'map' does not exist on type '() => IterableIterator'.
Type 'string[]' is not assignable to type '() => IterableIterator'.

问题原因 #

组件的Props类型定义错误：你将App组件的props类型直接标注为string[]，但实际上props是一个包含keys属性的对象，而非字符串数组。TypeScript因此错误地将解构后的keys识别为数组的迭代器方法，而非传入的字符串数组，导致无法调用map方法。

修复方案 #

需要正确定义Props的类型，明确props是一个带有keys属性的对象，有两种常见写法：

写法1：使用接口定义Props类型

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

// 定义组件Props的接口
interface AppProps {
  keys: string[];
}

function App({keys}: AppProps) {
  return (
    <div>
      {keys.map((key: string) => (
        <li key={key}>{key}</li> {/* 补充key属性，避免React警告 */}
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

写法2：直接使用对象类型注解

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

// 直接在参数上标注对象类型
function App({keys}: { keys: string[] }) {
  return (
    <div>
      {keys.map((key: string) => (
        <li key={key}>{key}</li> {/* 补充key属性，避免React警告 */}
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

额外说明 #

修复类型问题后，记得给map生成的<li>元素添加key属性，这是React列表渲染的要求，避免控制台出现警告。

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