启用NextJS typedRoutes后,TypeScript泛型路由返回报错咨询
问题原因分析
这个类型报错的核心是Next.js typedRoutes生成的Route类型和你函数返回的模板字符串类型不匹配,具体拆解为两点:
Route是严格的预定义字面量联合类型
开启typedRoutes后,Next.js会扫描你的路由文件,生成一个包含所有合法路由的字面量联合类型(包括动态路由对应的模板字符串字面量,比如/profile/${string}/company-details)。但TypeScript对这类类型的校验非常严格——只有完全匹配这个预定义模板字面量的类型才会被认可,而如果你的泛型函数返回值被推断为宽泛的string类型(而非精确的模板字面量),就会触发类型不兼容。泛型函数的类型推断丢失了精确性
如果你的泛型没有对参数做明确约束,或者函数返回值没有显式指定为Route类型的子集,TypeScript会把模板字符串的返回值推断为普通string,而不是Next.js生成的那个精确的模板字面量类型。比如:
function test<T>(userId: T) { return `/profile/${userId}/company-details`; }
这里返回值会被推断为string,而不是Route类型中对应的/profile/${string}/company-details模板字面量,自然无法赋值给Route类型的变量。
另外,如果你传入的泛型参数T不是string类型(比如数字),模板字符串会自动把它转为string,但类型推断依然会是宽泛的string,而非匹配Route的精确类型。
内容的提问来源于stack exchange,提问作者ThisRestlessPilgrim
相关产品推荐
相关产品推荐

