useSWRMutation POST请求中optimisticData出现TypeScript类型错误

错误原因 #

报错里的headers指的是你optimisticData回调返回的模拟响应对象中的headers属性。核心问题是：

• current参数可能为undefined（比如首次请求未完成时），用...current展开后，返回对象的headers会变成可选类型（可能是undefined）
• 但SWR要求optimisticData返回的必须是标准Response类型，而Response的headers是必选的Headers实例，不能为undefined，因此触发类型不匹配报错。

修复代码 #

你需要确保optimisticData返回的对象严格符合Response类型，处理current为undefined的情况：

const onSubmit: SubmitHandler<FormData> = data => {
  trigger(data, {
    rollbackOnError: true,
    optimisticData: current => {
      // 处理current为undefined的情况，提供默认的Response必选属性
      const defaultResponse = {
        headers: new Headers(),
        ok: true,
        status: 200,
        statusText: 'OK',
        type: 'basic',
        url: `${baseUrl}radios`,
        redirected: false,
        body: null,
        bodyUsed: false,
        clone: () => ({ ...defaultResponse }),
        formData: async () => new FormData(),
        json: async () => ({ data }),
        text: async () => JSON.stringify({ data })
      };
      // 合并现有响应（如果存在）和新数据，确保所有必选属性都有值
      return {
        ...(current || defaultResponse),
        data
      };
    },
  });
};

额外说明 #

如果你的sendRequest返回的是自定义响应结构（而非标准浏览器Response），建议先定义专属类型，避免类型冲突：

// 自定义响应类型
interface CustomApiResponse {
  data: any;
  headers: Headers;
  ok: boolean;
  status: number;
  // 其他你需要的属性
}

// 使用时指定泛型类型
const { trigger, data, error, isMutating } = useSWRMutation<CustomApiResponse, Error, FormData>(
  `${baseUrl}radios`,
  sendRequest
);

这样optimisticData的回调参数和返回值会自动匹配自定义类型，headers的类型错误也会消失。

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