Next.js 14传递Link参数时TS报错：item隐式具有any类型

你遇到的核心问题是未明确导航链接数组元素的类型，导致TypeScript无法推断item的类型，同时错误地用DOM元素类型（如HTMLElement）匹配自定义链接对象。以下是具体解决方案：

1. 定义导航链接的类型 #

根据你的Links数组结构，创建自定义类型，包含链接所需属性（如路由路径path、显示文本label等）：

// 单个导航链接的类型
type NavLinkItem = {
  path: string; // 路由路径
  label: string; // 链接显示文本
  // 可按需添加其他属性，比如 icon?: React.ReactNode;
};

2. 给Links数组指定类型 #

将导航链接数组明确标注为NavLinkItem[]类型，让TypeScript正确推断数组元素结构：

const Links: NavLinkItem[] = [
  { path: "/", label: "首页" },
  { path: "/about", label: "关于我们" },
  { path: "/blog", label: "博客" },
];

3. 给NavLink组件的props指定类型 #

在NavLink组件中，明确item参数的类型为NavLinkItem：

// 组件props类型
type NavLinkProps = {
  item: NavLinkItem;
};

const NavLink = ({ item }: NavLinkProps) => {
  return (
    // 使用Next.js官方Link组件（推荐）
    <Link href={item.path}>{item.label}</Link>
    // 或原生a标签（Next.js中不推荐）
    // <a href={item.path}>{item.label}</a>
  );
};

为什么之前的尝试无效？ #

你用HTMLElement等DOM元素类型是错误的——item并非DOM元素，而是你自定义的路由链接对象。DOM元素类型包含id、className等属性，不存在你定义的path字段，因此会出现类型不匹配的错误。

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