如何解决TypeScript类型错误：'string'无法赋值给指定数组类型

1. 修复JSON翻译文件的语法错误 #

你的JSON翻译内容存在语法错误：text数组中第二个对象后多了一个多余的},，这会导致i18n解析失败，返回字符串而非预期的数组，直接触发text.map is not a function错误。

修正后的JSON格式：

"data": {
  "title": "Title",
  "text": [
    {"question": "questionOne", "solution": "solutionOne"},
    {"question": "questionTwo", "solution": "solutionTwo"}
    // ...其他条目
  ]
}

2. 解决TypeScript类型不匹配问题 #

TypeScript无法自动推断getTranslations返回的data.text是你定义的数组类型，需要手动指定类型断言：

修改page.tsx中Data组件的text属性：

<Data 
  title={t('data.title')} 
  text={t('data.text', { returnObjects: true }) as { question: string; solution: string }[]}
></Data>

如果想更规范，可以提前定义翻译内容的类型，再给t函数做类型约束：

// 定义翻译数据的类型
type AppTranslation = {
  data: {
    title: string;
    text: { question: string; solution: string }[];
  };
};

// 断言t函数的返回类型
const t = await getTranslations('') as (
  key: keyof AppTranslation['data'],
  options?: { returnObjects: boolean }
) => AppTranslation['data'][typeof key] | any;

3. 验证i18n配置 #

确保你的i18n库（比如next-intl）配置支持返回对象/数组，默认情况下这类库都支持，但如果有自定义配置，需确认未禁用相关功能。

错误原因总结 #

• text.map is not a function：JSON语法错误导致i18n解析失败，返回了字符串，字符串没有map方法。
• TypeScript类型错误：getTranslations的返回值类型未被正确推断，TS认为返回的是string，无法匹配Data组件要求的数组类型。

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