React组件Props映射失效求助：props is not a function错误排查

核心错误原因 #

1. Props传递方式错误：你用...normalGameMap展开数组传递给组件，这会把数组里每个对象的属性（resource、number）拆成零散的props传给GameMap，而不是把整个数组作为一个完整的props属性。
2. 组件Props类型定义错误：React组件的props本质是对象，你直接把数组类型GameMapTiles作为props类型，导致组件接收的不是数组，而是一堆零散属性，自然无法调用map方法。
3. Map函数用法错误：你遍历的是TileData对象数组，map回调的参数应该是(对象元素, 索引)，而不是([key, tile], count)这种键值对解构写法。

修正后的代码 #

1. 自定义类型文件（new-types.ts）

新增组件Props的类型定义，保留原有类型：

export type Resource = "wood" | "brick" | "sheep" | "wheat" | "ore";

export type TileData = {
  resource: Resource;
  number: number;
};
export type GameMapTiles = TileData[];

// 新增GameMap组件的Props类型
export type GameMapProps = {
  tiles: GameMapTiles;
};

2. page.tsx

修改组件传参方式，直接传递整个数组作为tiles属性：

import GameMap from "@/components/GameMap";
import { GameMapTiles } from "@/components/new-types";

export default function Home() {
  const normalGameMap: GameMapTiles = [{ resource: "wood", number: 2 }];

  return (
    <main>
      <GameMap tiles={normalGameMap} />
    </main>
  );
}

3. GameMap组件

修正Props类型，正确遍历数组：

import { GameMapProps } from "@/components/new-types";

const GameMap = (props: GameMapProps) => {
  return (
    <div className="something">
      {props.tiles.map((tile, index) => (
        <div className="Sometile" key={index}>
          {/* 可按需渲染tile内容，示例： */}
          {tile.resource} - {tile.number}
        </div>
      ))}
    </div>
  );
};
export default GameMap;

额外说明 #

• 尽量避免用数组索引作为key，如果后续tiles有增删操作，可能引发渲染异常。如果每个tile有唯一标识（比如id），优先用唯一值作为key。
• TypeScript的核心作用是类型校验，定义正确的Props类型能提前帮你发现这类传参错误，后续开发要注意组件Props必须是对象类型。

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