NextJs多步骤表单Step2值回显到Step1问题求助（shadcn/react-hook-form/zod）

核心原因分析 #

这个问题的本质是多步骤间字段命名冲突，或是切换步骤时未正确管理表单字段的渲染/状态，导致react-hook-form共享的form实例中，后序步骤的字段值覆盖了前序步骤的同名字段。即使移除shadcn/ui，只要react-hook-form的字段管理逻辑有问题，就会出现串值现象。

具体排查与修复步骤 #

1. 检查并修正字段命名 #

• 确认Step1和Step2是否存在重复的字段名（比如都用了name、address这类通用名称）。如果有，给字段添加步骤前缀做区分：
  • Step1字段：step1_companyName、step1_contactEmail
  • Step2字段：step2_businessLicenseNo、step2_taxId
• 同步调整Zod Schema，确保字段名一一对应：

  const step1Schema = z.object({
    step1_companyName: z.string().min(1, "企业名称不能为空"),
    step1_contactEmail: z.string().email("请输入合法邮箱"),
  });
  
  const step2Schema = z.object({
    step2_businessLicenseNo: z.string().min(10, "营业执照编号长度不足"),
    step2_taxId: z.string().min(8, "纳税人识别号长度不足"),
  });
  
  const fullSchema = step1Schema.merge(step2Schema);
  

2. 严格控制步骤字段的渲染逻辑 #

切换到Step1时，确保Step2的字段组件完全不渲染（不要用display: none隐藏，要用React条件渲染），避免未显示的字段仍与form实例绑定：

{currentStep === 1 && (
  <FormField
    control={form.control}
    name="step1_companyName"
    render={({ field }) => (
      <FormItem>
        <FormLabel>企业名称</FormLabel>
        <FormInput {...field} />
        <FormMessage />
      </FormItem>
    )}
  />
)}

{currentStep === 2 && (
  <FormField
    control={form.control}
    name="step2_businessLicenseNo"
    render={({ field }) => (
      <FormItem>
        <FormLabel>营业执照编号</FormLabel>
        <FormInput {...field} />
        <FormMessage />
      </FormItem>
    )}
  />
)}

3. 步骤切换时管控表单状态 #

如果返回Step1时不需要保留Step2的内容，可以在返回按钮的点击事件中重置Step2字段：

const handleGoBack = () => {
  // 保留Step1的内容，仅重置Step2字段
  form.reset({
    ...form.getValues(),
    step2_businessLicenseNo: "",
    step2_taxId: "",
  });
  setCurrentStep(1);
};

若需要保留Step2内容，只要字段名完全独立，仅通过条件渲染切换即可，无需额外重置操作。

4. 检查表单初始化配置 #

确保useForm的默认值没有覆盖问题，每个字段都明确初始化：

const form = useForm<z.infer<typeof fullSchema>>({
  defaultValues: {
    step1_companyName: "",
    step1_contactEmail: "",
    step2_businessLicenseNo: "",
    step2_taxId: "",
  },
  resolver: zodResolver(fullSchema),
});

额外验证点 #

• 排查是否在步骤切换逻辑中误调用了setValue修改了Step1的字段值
• 确认FormField的name属性是否严格对应到当前步骤的字段名

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