Next.js+TypeScript自定义Link组件报错：href属性为undefined

问题根源 #

你定义NavLink组件时参数结构错误：React函数组件的唯一参数是包含所有属性（包括children）的props对象，而你写成了(children, props)，这会导致第二个参数props实际为undefined，自然props.href取不到传入的值，传给<Link>时就变成了undefined，触发类型错误。

解决方案 #

修正组件的参数结构，正确接收props对象：

修正后的NavLink组件代码

import React from 'react';
import Link from 'next/link'; // 按实际使用的Link组件调整

const NavLink: React.FC<{
  activeClassName: string;
  className: string;
  href: string;
  clickEvent?: React.MouseEventHandler;
  onClick?: React.MouseEventHandler;
  title: string;
}> = ({ children, ...props }) => {
  // 可在此添加active状态判断等自定义逻辑
  return (
    <Link href={props.href} onClick={props.clickEvent} passHref>
      <a 
        className={`${props.className} ${/* 根据active状态拼接activeClassName */}`} 
        title={props.title}
      >
        {children}
      </a>
    </Link>
  );
};

若无需解构children，也可直接使用props对象：

const NavLink: React.FC<{
  activeClassName: string;
  className: string;
  href: string;
  clickEvent?: React.MouseEventHandler;
  onClick?: React.MouseEventHandler;
  title: string;
}> = (props) => {
  return (
    <Link href={props.href} onClick={props.clickEvent} passHref>
      <a className={props.className} title={props.title}>
        {props.children}
      </a>
    </Link>
  );
};

关键说明 #

• React函数组件仅接收一个参数：包含所有传入属性的props对象，href、className、children等都在该对象内。
• 修正参数结构后，props.href就能正确获取到调用时传入的'/'，不再是undefined，符合<Link>组件对href属性的类型要求。

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