Next.js中Typescript+i18next调用返回对象数组出现类型约束错误如何解决

• 泛型参数位置错误：i18next的t翻译函数第一个泛型参数是用于约束翻译key的类型，默认为字符串类型，你将自定义的NavItemProps[]放在了第一个泛型位，不符合key的类型约束，因此触发Type 'NavItemProps[]' does not satisfy the constraint 'string | TemplateStringsArray'报错。
• 返回值类型未匹配：默认配置下，即使传入returnObjects: true参数，t函数的返回值类型为string | object | (string | object)[]联合类型，TypeScript无法确定返回值一定是数组，因此调用map方法时会提示Property 'map' does not exist on type 'string'。

快速修复（临时方案） #

直接使用类型断言指定返回值类型即可，无需修改全局配置，代码修改如下：

// 把原来的泛型写法换成类型断言
const navItems = t('menu', {returnObjects: true}) as NavItemProps[]

全局类型强化（推荐方案） #

配置i18next全局类型，让TypeScript自动根据翻译文件推导返回值类型，后续所有翻译调用都不需要手动写类型断言：

1. 在项目根目录新建类型声明文件i18next.d.ts
2. 写入以下配置，注意替换翻译文件路径为你本地实际路径：

import 'i18next'
// 导入对应命名空间的翻译文件，示例为中文navbar翻译文件路径
import navbarTranslation from './public/locales/zh/navbar.json'

declare module 'i18next' {
  interface CustomTypeOptions {
    resources: {
      // 命名空间和翻译文件绑定
      navbar: typeof navbarTranslation
    }
  }
}

配置完成后，原代码中直接调用t('menu', {returnObjects: true})即可自动识别返回值为NavItemProps[]类型，无需额外类型声明。

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