React+TypeScript组件传参报错：pinData属性不匹配pinImage类型

你的类型错误根源在于组件接收props的方式和传递方式不匹配：

• PinCard组件定义时直接接收pinImage类型的参数，相当于它期望props就是pinImage的结构（即直接传入id、name等字段）
• 但父组件调用时却用了pinData={item}的方式，给组件传了一个名为pinData的属性，这和组件期望的props类型不兼容

两种可行的解决方法 #

方法一：修改PinCard组件，适配父组件的传参方式 #

把PinCard的props定义为包含pinData字段的对象，和父组件的传参逻辑对应：

// PinCard.tsx
import { pinImage } from "../Type/PinImage";

// 定义组件props的类型
type PinCardProps = {
  pinData: pinImage;
};

function PinCard({ pinData }: PinCardProps) {
  return (
    <div><img src={pinData.img} alt={pinData.description} /></div>
  );
}

export default PinCard;

父组件代码无需修改，即可正常匹配类型。

方法二：修改父组件的传参方式，直接传递pinImage字段 #

保持PinCard组件不变，父组件调用时展开item的属性，把pinImage的各个字段直接作为props传给组件：

// PinCardList.tsx
import data from '../Data/PinRepo.json';
import PinCard from '../PinCard/PinCard';
import { pinImage } from '../Type/PinImage';

function PinCardList(){     
    let dataList : pinImage[] = data.pin;

    return(
        <div>
            <ul>
                {
                    dataList.map((item) => {
                        // 展开item属性，直接传递给PinCard
                        return <li key={item.id}><PinCard {...item}/></li>
                    })
                }
            </ul>
        </div>
    )
}

export default PinCardList;

另外注意：PinCard组件原JSX写法有误，<div>img src = {pinData.img} alt="{pinData.description}"</div>不会渲染出图片标签，需修正为<div><img src={pinData.img} alt={pinData.description} /></div>。

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