本文详解在使用 React Hook Form 等表单库时，如何正确访问含动态索引（如 M1.${index}.M13-M14）的嵌套错误对象，避免因属性路径非法导致的 undefined 或运行时错误。
本文详解在使用 react hook form 等表单库时，如何正确访问含动态索引（如 `m1.${index}.m13-m14`）的嵌套错误对象，避免因属性路径非法导致的 `undefined` 或运行时错误。
在 React 表单开发中，尤其是处理动态列表（如可增删的字段组）时，常需为每个子项生成带索引的嵌套字段名，例如 M1.0.M13-M14、M1.1.M13-M14。此时虽能通过 register('M1.${index}.M13-M14') 正确注册字段，但直接用方括号语法 errors['M1.${index}.M13-M14'] 访问错误对象会失败——因为 errors 是一个嵌套 JavaScript 对象，而非扁平键值对映射；该字符串路径不会被自动解析为深层属性访问。
✅ 正确方案一：使用 Lodash 的 get()（推荐）
lodash.get 是专为安全读取嵌套路径设计的工具函数，支持点号分隔的路径字符串（自动处理数组索引与特殊字符），且对不存在的路径返回 undefined 而非报错：
import { get } from 'lodash';
// 在 JSX 中安全访问
<TextField
{...register(`M1.${index}.M13-M14`, { required: true })}
fullWidth
error={get(errors, `M1.${index}.M13-M14`)?.type === 'required'}
/>✅ 优势：
- 支持任意深度嵌套及动态索引（M1.0.M13-M14、M1[0]["M13-M14"] 均可）；
- 自动容错，无需手动检查中间层级是否存在；
- 兼容连字符（-）、数字索引、点号等特殊字符。
? 提示：若项目已使用 Lodash，此为最简洁可靠的方案；若追求轻量，可单独安装 lodash.get：npm install lodash.get，并按需导入 import get from 'lodash.get';。
✅ 正确方案二：手动路径拆解（无依赖）
若不想引入外部依赖，可将动态路径按点号分割后逐级访问。注意：必须严格校验每层是否存在，否则会触发 Cannot read property 'xxx' of undefined 错误：
const getNestedError = (obj: any, path: string) => {
return path.split('.').reduce((current, key) => {
return current && typeof current === 'object' ? current[key] : undefined;
}, obj);
};
// 使用
error={getNestedError(errors, `M1.${index}.M13-M14`)?.type === 'required'}⚠️ 注意事项：
- 此方法不原生支持方括号语法（如 M1[0].M13-M14），需额外正则解析；
- 若 index 为变量，确保其值为有效数字且在 errors.M1 数组范围内；
- 手动实现易出错，建议仅在极简场景下采用。
❌ 常见错误写法（务必避免）
// ❌ 错误：字符串字面量无法触发嵌套访问
errors[`M1.${index}.M13-M14`] // → undefined（除非 errors 恰好有该完整字符串键）
// ❌ 错误：未校验中间层级，运行时崩溃
errors['M1'][index]['M13-M14']?.type // 若 errors.M1 为 undefined 或 index 越界，直接报错
// ❌ 错误：模板字符串未生效（ES6 模板语法仅在 `` 内有效）
errors['M1.${index}.M13-M14'] // → 字面量字符串，非插值总结
动态字段名对应的错误访问本质是「安全的嵌套属性读取」问题。优先选用 lodash.get ——它语义清晰、健壮性强、社区验证充分；若需零依赖，则务必封装带空值防护的路径访问函数。无论哪种方式，都应避免裸写链式访问或误将模板字符串当作路径解析器。正确处理该问题，是构建可扩展、高稳定性的动态表单的关键一步。
