将链接作为参数传递给函数时出现打字稿错误

Question

我在这里使用 Nextjs 14。

import Link from "next/link";

const Links = [
  {
    title: "Homepage",
    path: "/",
  },

  {
    title: "About",
    path: "/about",
  },
];

return (
  <div>
    {Links.map(
      (link) =>
        (
          <Navlink item={link} key={link.title} />
        )`passing navigation link as parameter to the below component NavLink`,
    )}
  </div>
);

const Navlink = ({ item }) => {
  return (
    <Link href={item.path}></Link>
  )`Error path is not part of the element`
};

`我收到的错误消息是 - “绑定元素‘item’隐式具有‘any’类型”。 但找不到该项目的类型。

请建议正确的类型

我尝试像 HTMLElement React 元素一样定义 {item} 的类型，但每次都会收到错误“路径”不是元素的一部分。`

需要帮助来定义 {item} 的类型

Answer 1

这是一个很好的问题，这里发生的事情是你的

Navlink

组件是孤立的，并且永远不知道你将在哪里或如何使用它，然后 TS 无法推断数据类型。

我可以看到两种可能的解决方案：

1. （推荐）对于您的特定场景，您可能不需要

   Navlink

   组件，因为它根本不会扩展组件的功能。

  <div>
    {Links.map(
      (link) => <Link href={item.path}></Link>
    )}
  </div>

2. （如果您没有上传完整代码）并且您正在扩展大量功能，您应该为组件道具创建类型/接口。

interface LinkItem {
  title: string;
  path: string;
}

并在您的组件中像这样使用：

const Navlink = ({ item }: { item: LinkItem }) => {
  return (
    <Link href={item.path}>
      {item.title}
    </Link>
  );
};

希望对你有帮助！