如何修复Next.js中next/link组件的TypeScript错误

问题原因 #

你遇到的Type 'string' is not assignable to type 'RouteOrQuery'错误，是因为项目里用了类型安全路由工具（比如nextjs-routes），它会给Link组件的href属性强制绑定预定义的路由类型，不允许直接传任意拼接的字符串。你代码里的/${major}、/${major}/${slug}都是动态生成的字符串，不符合工具要求的类型规范。

解决方案 #

方案1：使用类型安全路由的生成方法（推荐） #

如果你的项目依赖nextjs-routes，它会自动生成路由相关的类型和辅助函数。你可以用它提供的route函数来生成符合类型要求的href：

// 导入生成的route函数
import { route } from 'nextjs-routes';

// ...其他代码不变

<li><Link href={route(`/${major}`)}>{majors[major as keyof typeof majors]}</Link></li>
<li><Link href={route(`/${major}/${slug}`)}>{schoolName}</Link></li>

route函数会自动校验路由格式，返回符合RouteOrQuery类型的结果，同时保留类型检查能力。

方案2：约束major的类型范围 #

把Props里的major类型从string改成keyof iMajors，这样TypeScript就知道major只能是预定义的几个值，拼接出来的路由字符串也会被识别为合法的路由类型：

type Props = {
    schoolName: string;
    // 把string改成keyof iMajors，约束major只能是预定义的键值
    major: keyof iMajors;
    slug: string;
};

这样修改后，/${major}和/${major}/${slug}就会被TypeScript判定为合法的路由字符串，不会再报错。

方案3：临时类型断言（不推荐） #

如果只是临时解决问题，可以把字符串断言为RouteOrQuery类型，但这样会失去类型安全检查的优势：

// 先导入类型
import type { RouteOrQuery } from 'nextjs-routes';

// ...其他代码不变

<li><Link href={`/${major}` as RouteOrQuery}>{majors[major as keyof typeof majors]}</Link></li>
<li><Link href={`/${major}/${slug}` as RouteOrQuery}>{schoolName}</Link></li>

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