next-i18next的Trans组件插值异常：显示[Object object]而非正常链接

问题根源 #

你直接将包含HTML标签的翻译值作为<Trans>的子元素传入，这不符合Trans组件的设计逻辑。Trans组件会将字符串中的HTML标签解析为React元素对象，当这些对象被强制转为字符串时，就会显示[Object object]。

正确解决方案 #

方案1：使用Trans组件的components属性（推荐） #

这是Trans组件的标准用法，安全且符合React组件化逻辑：

1. 修改翻译文件（如public/locales/en/common.json）：

{
  "link_text": "点击 <0>这里</0> 查看详细说明"
}

这里的<0>是占位符，对应后续传入的第0个组件。

2. 组件中正确使用Trans：

import { Trans } from 'next-i18next';

// 在组件内
<Trans i18nKey="common:link_text" components={[<a href="/docs" className="link" />]} />

components数组中的元素会替换翻译文本中对应的占位标签，最终渲染出正常的链接。

方案2：直接渲染HTML字符串（不推荐，有XSS风险） #

如果必须直接使用包含HTML的翻译字符串，不要用Trans组件，改用dangerouslySetInnerHTML：

import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('common');
  return <div dangerouslySetInnerHTML={{ __html: t('link_text') }} />;
};

⚠️ 注意：这种方式会直接渲染HTML，若翻译内容包含恶意代码，会引发XSS攻击，仅适用于完全可控的翻译内容。

关键注意事项 #

• 确保next-i18next版本为最新，旧版本可能存在解析逻辑bug
• 翻译文件中的占位标签（如<0>、<1>）需与components数组的索引严格对应
• 不要混用t()返回的带标签字符串和Trans组件的子元素传递方式

内容的提问来源于stack exchange，提问作者RemediumJeżozwierza