升级依赖后react-i18next与lodash/_get类型兼容问题求助

安全阿岳

2026-8-6

解决react-i18next升级后lodash/get与translate的类型冲突问题

问题场景

升级react-scripts、typescript和react-i18next等依赖后，项目中多处使用的以下代码出现类型错误：

import _get from 'lodash/get';
const { translate } = useLocales();

translate(
  _get(error, 'response.data.validationFailures.0.field'),
  _get(error, 'response.data.validationFailures.0.code')
),

报错信息：

Argument of type 'TFunctionDetailedResult' is not assignable to parameter of type 'SnackbarMessage'.

尝试将_get的返回值断言为String也无法解决该问题。
背景：此前类似问题的解决方式
之前曾遇到过类似的类型不匹配问题：
.required(translate('validations.organization.name', 'Organization name is required.'))
当时的报错为：
Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type 'Message<{}> | undefined'.
通过在项目中添加i18next.d.ts声明文件，修改i18next的返回类型配置解决了问题：
import 'i18next'; declare module 'i18next' { interface CustomTypeOptions { returnNull: false; } }
该配置让translate不再返回null，消除了类型冲突。
当前问题的解决方案
由于_get并非在所有场景下都返回字符串，不能全局覆盖其类型定义，可通过以下几种局部处理方式解决：
1. 调用_get时显式指定泛型并设置默认值
在调用_get时明确指定泛型为string，同时传入空字符串作为默认值，确保返回值一定是字符串类型：
translate( _get<string>(error, 'response.data.validationFailures.0.field', ''), _get<string>(error, 'response.data.validationFailures.0.code', '') ),
这种方式无需额外封装，直接修改调用处即可，类型检查会认可返回值为字符串。
2. 封装局部专用的字符串取值函数
在需要处理这类场景的文件中，封装一个仅返回字符串的get工具函数，内部复用_get但强制类型：
import _get from 'lodash/get'; // 局部专用：从对象中获取字符串类型的值，默认返回空字符串 const getString = <T>(obj: T, path: string): string => { return _get(obj, path, '') as string; }; // 使用封装后的函数 translate( getString(error, 'response.data.validationFailures.0.field'), getString(error, 'response.data.validationFailures.0.code') ),
这种方式适合多处重复使用的场景，统一管理类型逻辑，不影响全局的_get类型。
3. 结合类型守卫做运行时检查
如果需要确保类型安全且允许值不存在的情况，可以先通过类型守卫判断返回值类型，再调用translate：
const field = _get(error, 'response.data.validationFailures.0.field'); const code = _get(error, 'response.data.validationFailures.0.code'); if (typeof field === 'string' && typeof code === 'string') { translate(field, code); } else { // 处理值不存在或类型不符的情况 translate('default.error.message'); }
这种方式最严谨，适合对类型安全要求极高的场景，同时能处理异常情况。
内容的提问来源于stack exchange，提问作者margherita pizza

升级依赖后react-i18next与lodash/_get类型兼容问题求助

问题场景 #

背景：此前类似问题的解决方式 #

当前问题的解决方案 #

1. 调用_get时显式指定泛型并设置默认值 #

2. 封装局部专用的字符串取值函数 #

3. 结合类型守卫做运行时检查 #

问题场景

背景：此前类似问题的解决方式

当前问题的解决方案

1. 调用`_get`时显式指定泛型并设置默认值

2. 封装局部专用的字符串取值函数

3. 结合类型守卫做运行时检查