将道具传递给组件时出现类型错误答案

【问题标题】：Type error when passing props to component将道具传递给组件时出现类型错误
【发布时间】：2022-01-11 00:04:35
【问题描述】：

你好，我有一个看起来像这样的类型：

type MenuItemType = { name: string; link: string };

也是这些类型的数组：

const menuItems: MenuItemType[] = [
    { name: "FAQ", link: "/faq" },
    { name: "Terms of use", link: "/terms" },
    { name: "Cookie policy", link: "/cookie-policy" },
    { name: "Privacy policy", link: "/privacy-policy" },
    { name: "Subscription", link: "/subscription" },
];

还有一个组件，它采用一些相同类型的道具：

function ListItem({ name, link }: MenuItemType) {
    return (
        <li className="text-xs mr-14 last:mr-0">
            <Link href={link}>
                <a>{name}</a>
            </Link>
        </li>
    );
}

ListItem 组件在 map 函数中呈现，这就是 typescript 抱怨的地方。

我做错了什么？

【问题讨论】：

标签： typescript next.js

【解决方案1】：

您已经定义了 ListItem 组件，因此它需要名称和链接的单独道具，而不是项目的组合道具。所以如果 ListItem 是正确的，你会这样使用它：

<ListItem name={item.name} link={item.link} />
// or:
<ListItem {...item} />

或者，如果您想传入单个项目道具，请将 ListItem 重写为：

function ListItem({ item }: { item: MenuItemType }) {
    return (
        <li className="text-xs mr-14 last:mr-0">
            <Link href={item.link}>
                <a>{item.name}</a>
            </Link>
        </li>
    );
}

【讨论】：