shadcn-ui表单组件中FormMessage显示undefined问题的分析与解决

问题背景

在使用shadcn-ui的表单组件时，开发者可能会遇到一个特殊问题：当验证数组字段时，FormMessage组件在某些情况下会显示"undefined"而不是预期的错误信息。这种情况通常发生在使用Zod验证库对数组字段进行最小长度验证时。

问题重现

该问题在以下场景中特别明显：

1. 当定义一个要求至少包含2个元素的数组字段验证规则时
2. 初始状态下（数组为空）能正确显示"Array must contain at least 2 element(s)"的错误信息
3. 但当数组中添加了一个元素后（但仍未达到最小要求），错误信息会变成"undefined"

技术分析

通过深入分析错误对象的日志输出，我们发现：

1. 空数组时的错误对象结构：

{
    "error": {
        "message": "Array must contain at least 2 element(s)",
        "type": "too_small",
        "ref": {
            "name": "fieldConfiguration.inputConfiguration.options"
        }
    }
}

2. 部分填充数组时的错误对象结构：

{
    "error": {
        "root": {
            "message": "Array must contain at least 2 element(s)",
            "type": "too_small",
            "ref": {
                "name": "fieldConfiguration.inputConfiguration.options"
            }
        }
    }
}

关键区别在于错误信息的存储位置发生了变化：从直接位于error对象下的message属性，转移到了error.root.message属性中。

根本原因

FormMessage组件的当前实现仅检查error.message属性，而忽略了error.root.message属性。当验证错误的结构发生变化时，组件无法正确获取错误信息，导致显示"undefined"。

解决方案

修改FormMessage组件的错误信息获取逻辑，使其能够处理两种不同的错误对象结构：

const body = error ? String(error?.message || error?.root?.message) : children;

这一修改使得组件能够：

1. 首先尝试从error.message获取错误信息
2. 如果不存在，则尝试从error.root.message获取
3. 如果都不存在，则回退到显示子内容

最佳实践建议

在使用shadcn-ui表单组件时，开发者应当注意：

1. 对于数组字段验证，建议始终检查错误信息的显示是否正确
2. 当使用复杂嵌套字段时，要注意验证错误可能存在于不同层级的对象中
3. 可以自定义FormMessage组件以处理更多可能的错误对象结构

总结

shadcn-ui作为流行的UI组件库，其表单组件与验证库的集成非常强大。理解并正确处理验证错误对象的不同结构，能够帮助开发者构建更健壮的表单界面。本文描述的问题和解决方案不仅适用于数组验证场景，也适用于其他可能导致错误对象结构变化的复杂验证场景。