React TypeScript：解决react-hook-form提交时Property does not exist报错

你遇到的错误是因为data.participants的类型是对象数组（从你的schema和types定义能看到，它是z.object(...).array().optional()和{...}[]），但你在onSubmit里直接尝试访问data?.participants?.id、data?.participants?.email——数组本身没有这些属性，只有数组里的每个元素（单个参与者对象）才有，所以TypeScript抛出了类型错误。

根据你的业务需求，分两种情况处理：

情况1：表单仅收集单个参与者信息 #

如果你的表单只需要添加一个参与者，先修正类型定义，把participants从数组改成单个可选对象：

1. 修改schema.ts #

export const schemaForShareSurveyEmail = z.object({
  id: z.string().optional(),
  subject: z.string().optional(),
  message: z.string().optional(),
  // 去掉.array()，改为单个可选对象
  participants: z.object({
      id: z.string().optional(),
      email: z.string().optional(),
      latitude: z.string().optional(),
      longitude: z.string().optional(),
  }).optional(),
});

2. 修改types.ts #

export type SharesurveyEmailPayload = {
  id?:string;
  message?: string;
  subject?: string;
  // 去掉数组符号[]，改为单个可选对象
  participants?:{
    id?: string | any,
    email?: string | any,
    latitude?: string | any,
    longitude?: string | any
  };
};

3. 调整onSubmit代码 #

如果createForm要求participants是数组，就把单个对象包装成数组；如果允许单个对象，直接传入即可：

const onSubmit = (data: SchemaEmailShareSurvey) => {
  createForm({
    id: data?.id,
    message: data?.message,
    subject: data?.subject,
    // 把单个participant包装成数组（适配createForm的参数要求）
    participants: data.participants ? [data.participants] : [],
  });
};

情况2：表单需要收集多个参与者信息 #

如果你的表单支持添加多个参与者，onSubmit里需要遍历data.participants数组，取出每个元素的属性：

const onSubmit = (data: SchemaEmailShareSurvey) => {
  createForm({
    id: data?.id,
    message: data?.message,
    subject: data?.subject,
    // 遍历数组，转换每个参与者对象
    participants: data.participants?.map(participant => ({
      id: participant.id,
      email: participant.email,
      latitude: participant.latitude,
      longitude: participant.longitude
    })) || [], // 处理数组为空或undefined的情况
  });
};

这样就能匹配SharesurveyEmailPayload里participants的数组类型，TypeScript的错误也会消失。

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