使用next-intl的getPathname()遇参数错误及类型冲突求助

云原生阿岚

2026-6-20

解决next-intl中getPathname()参数不匹配的问题

问题梳理

拆分next-intl路由配置后，调用getPathname()时报错：Error: Insufficient params provided for localized pathname. Template: /blog/[categorySlug] Params: undefined
TypeScript提示href对象仅支持query字段，但传入query后报错依旧；官方文档显示应使用params字段，TS却提示该属性不存在

核心原因：版本API差异

next-intl v3和v4版本的路由API有明显调整：

v3版本：动态路由参数需放在params字段中
v4版本：动态路由参数直接作为href的顶层属性，不再区分params和query

具体解决步骤

1. 先确认next-intl版本

执行命令查看当前项目的next-intl版本：

npm list next-intl
# 或用yarn
yarn list next-intl

2. 对应版本修改代码

若为v4版本（当前主流）

直接把动态参数放在href对象顶层，不需要嵌套query或params：

const path = getPathname({
  locale: locale,
  href: {
    pathname: "/blog/[categorySlug]",
    categorySlug: 'news'
  },
});

若为v3版本

确保从next-intl/routing导入getPathname，并使用params字段传参：

import { getPathname } from 'next-intl/routing';

const path = getPathname({
  locale: locale,
  pathname: "/blog/[categorySlug]",
  params: { categorySlug: 'news' }
});

3. 检查路由配置正确性

确保pathnames配置正确定义了动态路由：

// config.ts
import { Pathnames } from 'next-intl/routing';
import { locales } from './your-locale-config';

export const pathnames = {
  '/blog/[categorySlug]': {
    en: '/blog/[categorySlug]',
    // 其他语言的路由映射，比如zh: '/博客/[categorySlug]'
  }
} satisfies Pathnames<typeof locales>;