Typescript React组件传递数组类型props时类型不匹配报错如何解决

React 函数组件的第一个入参永远是所有传递属性组成的对象，你当前的写法存在两处类型不匹配问题：

1. 你定义StatusPanel组件的入参为Array<StatusPanelProps>类型，相当于告诉TS该组件要直接接收一个数组作为参数
2. 实际调用时你写的是<StatusPanel rows={statusArray} />，组件实际接收到的入参是{ rows: statusArray }对象，和你定义的数组类型完全不符，因此TS会报找不到rows属性的错误。

调整类型定义和组件入参声明即可，修改后的完整代码如下：

第一步：调整类型与组件定义 #

import type { ReactNode } from 'react';

// 单条状态行的item类型
type StatusPanelRowItem = {
  statusIconID: string;
  statusData: ReactNode;
};

// StatusPanel组件本身的Props类型
type StatusPanelProps = {
  rows: Array<StatusPanelRowItem>;
};

const StatusPanel = ({ rows }: StatusPanelProps): JSX.Element => {
  return (
    <Column styles={statusPanelStyles} testID="status_panel" spacing={25}>
      {rows.map((row, i) => (
        <Row testID="status_part" spacing={15} key={i}>
          <Column testID="status_icon">
            <Icon id={row.statusIconID} />
          </Column>
          <Column testID="status_data">{row.statusData}</Column>
        </Row>
      ))}
    </Column>
  );
};

第二步：调用代码无需修改 #

你原有的LeftPanel调用逻辑完全符合修改后的Props定义，不需要改动。

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