React Intl的FormattedMessage使用变量作为id时报错如何解决

问题原因 #

该报错的核心是FormattedMessage组件首次渲染时，接收到的id属性为空/未定义，你在console.log中看到的有效值通常是组件首次渲染报错后，异步逻辑更新变量得到的后续值，console.log的引用特性会让你误以为首次渲染就拿到了有效值。

可直接复用的解决方案 #

• 方案1：添加条件渲染，确保id变量有有效值时再渲染组件

// 仅当idVariable为真值时才渲染FormattedMessage
{idVariable && <FormattedMessage id={idVariable} />}

• 方案2：给id属性添加合法兜底值，避免空值传入

// 兜底id需要是你国际化配置中已存在的合法id
<FormattedMessage id={idVariable ?? 'common.default.tip'} />

• 方案3：兼容非字符串/带空格的异常id值
  如果你的id变量可能是数字类型、或首尾带空格，可先做格式转换再传入：

<FormattedMessage id={String(idVariable).trim()} />

额外排查项 #

如果你使用了babel-plugin-formatjs等编译插件提取国际化id，需要确认插件未配置强制过滤动态id的规则，动态变量形式的id不会被静态提取插件识别，默认规则下不会影响运行，仅会跳过该id的自动提取。

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