基于React状态的Zod动态属性校验问题及优化咨询

问题根源 #

你之前的代码存在两个核心错误：

1. Zod的parse方法第二个参数仅接受Partial<ZodParseParams>类型（用于配置校验行为，如严格模式、类型转换等），不能直接传递自定义的state字符串，因此出现类型不匹配错误。
2. Zod的refine回调仅支持接收当前字段值作为唯一参数，无法直接传入额外的state参数，导致重载不匹配错误。

简洁清晰的实现方案 #

我们可以通过根据状态动态选择对应Schema的方式实现需求，复用公共字段、明确区分不同状态的校验规则，同时保证类型安全。

1. 重构Zod校验器

import { z, ZodError } from "zod";

// 定义公共字段Schema（所有状态下都必填的属性）
const commonSummarySchema = z.object({
  sessionId: z.string(),
  height: z.string(), // 根据实际业务类型调整，比如z.number()
});

// Human专属Schema：在公共字段基础上添加name必填规则
const humanSummarySchema = commonSummarySchema.extend({
  name: z.string().nonempty("name must be defined"),
});

// Animal专属Schema：在公共字段基础上添加breed必填规则
const animalSummarySchema = commonSummarySchema.extend({
  breed: z.string().nonempty("breed must be defined"),
});

// 根据state获取对应校验Schema
const getSummarySchema = (state: "human" | "animal") => {
  switch (state) {
    case "human":
      return humanSummarySchema;
    case "animal":
      return animalSummarySchema;
    default:
      throw new Error(`Unsupported state: ${state}`);
  }
};

export const validateSummary = (summaryData: unknown, state: "human" | "animal") => {
  try {
    const schema = getSummarySchema(state);
    return schema.parse(summaryData);
  } catch (error) {
    if (error instanceof ZodError) {
      console.error("Validation failed:", error.errors);
      throw error; // 抛出错误让上层处理，而非仅打印
    } else {
      console.error("Unexpected error:", error);
      throw error;
    }
  }
};

2. 调整业务逻辑代码

const dataFields: DataFields = (data, state) => {
  const { name, breed, height, sessionId } = data;

  try {
    // 根据state构建对应结构的summary对象
    const summary = state === "human" 
      ? { sessionId, name, height } 
      : state === "animal" 
        ? { sessionId, breed, height } 
        : (() => { throw new Error(`Unsupported state: ${state}`) })();

    // 执行校验并返回校验后的对象
    const validatedSummary = validateSummary(summary, state);
    return validatedSummary;
  } catch (error) {
    console.log(error);
    throw error; // 按需处理错误，比如返回默认值或向上抛出
  }
};

方案优势 #

• 规则清晰：不同状态的校验规则完全分离，便于后续维护和扩展
• 代码复用：通过extend复用公共字段Schema，避免重复定义
• 类型安全：限制state为合法枚举值，杜绝非法状态传入
• 简洁高效：使用Zod内置的nonempty校验必填字段，无需自定义复杂的refine逻辑

内容的提问来源于stack exchange，提问作者me-me