如何修复NextJS Next/link元素上的Typescript错误

Question

以下代码引发此Typescript错误：

类型"string"不可分配给类型"RouteOrQuery"。ts(2322(nextjs-routes.d.ts(32，5(：所需的类型来自属性"href"，该属性在类型"IntrnsicAttributes&链接道具&｛children？：ReactNode；｝'

错误发生在<Link>元素的href参数上。

import * as React from 'react';
import Link from 'next/link';
import styles from './breadcrumbs.module.css';
interface iMajors {
theatre: string;
musicaltheatre: string;
opera: string;
dance: string;
music: string;
visualarta: string;
}
type Props = {
schoolName: string;
major: string;
slug: string;
};
const Breadcrumbs: React.FC<Props> = (props) => {
const {
schoolName,
major,
slug
} = props;
const majors: iMajors = {
theatre: `Theatre`,
musicaltheatre: `Musical Theatre`,
opera: `Opera`,
dance: `Dance`,
music: `Music`,
visualarts: `Visual Arts`
};
if (schoolName && major && slug) {
return (
<div className={styles.container}>
<nav>
<ul>
<li><Link href="/">Home</Link></li>
<li><Link href={`/${major}`}>{majors[major as keyof typeof majors]}</Link></li>
<li><Link href={`/${major}/${slug}`}>{schoolName}</Link></li>
</ul>
</nav>
</div>
);
}
return null;
};
export default Breadcrumbs;

Answer 1

问题在于nextjs-routes.d.ts文件中nextjs路由生成的类型。如果你看他们的ReadMe(https://www.npmjs.com/package/nextjs-routes)，您可以看到href所需的格式。

以下是您的第一个href应该如何传递。查询是可选的。

<li><Link href={{pathname: "/", query: {foo: "test"}}}>{majors[major as keyof typeof majors]}</Link></li>

如果更改路径，则必须使用npx nextjs-routes重新生成nextjs-routes.d.ts文件。在该文件的顶部，您还可以看到Route类型，它详细说明了您可以传递的可接受路径名