从数据库预填表单时遇TypeScript错误：Property 'title'不存在于指定类型

问题描述 #

你在从数据库获取单条数据并创建可编辑表单组件时，遇到TypeScript警告：

Property 'title' does not exist on type '{ error: string; }'.ts(2339)

问题根源 #

你的getDataById函数在捕获错误时返回了包含error字段的对象，导致TypeScript推断该函数的返回类型为数据库实体类型与**{ error: string }**的联合类型。当你在组件中访问data.title时，TypeScript无法确定data是有效数据还是错误对象，因此抛出类型警告。

解决方案 #

1. 修正数据获取函数的错误处理逻辑 #

不要在getDataById中返回错误对象，而是直接抛出错误，让React Query的error属性捕获错误状态：

export async function getDataById(id: string) { // 替换any为具体类型，比如string
  try {
    const data = await db.appoinmentSchedule.findUnique({
      where: { id }
    });

    if (!data) {
      throw new Error("目标数据不存在");
    }

    return data;
  } catch (error) {
    // 抛出错误，交由React Query处理
    throw new Error("获取数据失败：" + (error instanceof Error ? error.message : "未知错误"));
  }
}

2. 明确函数返回类型（可选但推荐） #

给getDataById添加明确的返回类型，让TypeScript类型推断更清晰：

// 假设你的数据库实体类型来自Prisma，根据实际情况调整
import type { appoinmentSchedule } from "@prisma/client";

export async function getDataById(id: string): Promise<appoinmentSchedule> {
  // 上述修正后的函数代码
}

3. 在组件中完善状态处理 #

确保访问data属性前先验证数据有效性，同时处理加载、错误状态：

const { data, error, isFetching } = useQuery({
  queryKey: ["eventId", eventId],
  queryFn: () => getDataById(eventId),
});

const form = useForm<Events>({
  resolver: zodResolver(formSchemaData),
  // 将默认值统一放在useForm初始化中，符合React Hook Form最佳实践
  defaultValues: data 
    ? { title: data.title, email: data.email /* 其他字段 */ }
    : { title: "", email: "" /* 其他字段默认值 */ },
});

// 处理加载状态
if (isFetching) {
  return <div>加载中...</div>;
}

// 处理错误状态
if (error) {
  return <div>获取数据失败：{error.message}</div>;
}

// 处理数据不存在的情况
if (!data) {
  return <div>数据不存在</div>;
}

return (
  <Form {...form}>
    <form>
      <FormField
        control={form.control}
        name="title"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Title</FormLabel>
            <FormControl>
              <Input placeholder="title" {...field} />
            </FormControl>
            <FormDescription>
              This is your public display name.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      {/* 其他表单字段 */}
    </form>
  </Form>
);

额外说明 #

• React Query的设计逻辑是：queryFn成功时返回数据，失败时抛出错误，这样data的类型只会是成功返回的数据或undefined，error专门捕获错误信息，避免联合类型带来的类型歧义。
• 将表单默认值统一放在useForm初始化中，比在单个FormField中设置defaultValue更易维护。

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