如何访问react-hook-form中FieldErrors对象的message属性？

开发者阿泽

2026-7-12

解决react-hook-form中FieldErrors对象无法访问message属性的问题

原因分析与解决方法

明确错误对象的真实结构
你通过console.log看到errorProps包含message属性，但直接访问返回undefined，核心原因是message可能嵌套在更深的层级中。react-hook-form的FieldErrors结构会随表单字段嵌套方式、使用的校验器（如Zod、Yup）不同而变化。

建议先用console.log(JSON.stringify(errorProps))打印序列化后的完整结构，以此确认message的实际路径。常见的结构情况有两种：

字段级直接错误：{"message": "输入不能为空", "type": "required"}
根节点嵌套错误：{"root": {"message": "表单校验不通过"}}

调整属性访问路径
根据序列化后的结构，修改访问逻辑：

若message直接在errorProps下：直接用errorProps.message
若message在root子对象中：用errorProps.root?.message

遇到数组/嵌套对象字段的错误，可递归遍历获取信息：

const getErrorMessage = (error) => {
  if (error?.message) return error.message;
  if (error?.root?.message) return error.root.message;
  // 遍历嵌套子错误
  for (const key in error) {
    if (typeof error[key] === 'object' && error[key] !== null) {
      const msg = getErrorMessage(error[key]);
      if (msg) return msg;
    }
  }
  return '输入无效';
};

修改组件代码示例
结合上述方法，调整你的组件代码：

<Box display="flex" flexDirection="column" >
  {Object.entries(errors).map(([fieldId, errorProps]) => {
    // 打印序列化结构确认路径
    console.log('错误对象结构:', JSON.stringify(errorProps));
    const errorMessage = errorProps?.message || errorProps?.root?.message || '输入错误';
    return (
      <Box display="flex" key={fieldId}>
        <Typography type="negative">{errorMessage}</Typography>
      </Box>
    );
  })}
</Box>