Angular TypeScript：FormData与IDetails类型不匹配报错求助

错误的核心是类型不匹配：你调用postDetails时传入的是FormData对象，但这个方法的参数被定义为IDetails类型，TypeScript自然会报错——因为FormData没有IDetails要求的action、roleId等属性。

根源拆解 #

你的IDetails接口定义里，payload是FormData类型，意味着整个接口的结构是：

{
  action: string;
  roleId: number;
  anotherId: number;
  userDetails: IUserIds[];
  payload: FormData; // FormData是这个字段的值，不是整个请求的类型
}

但你现在的代码逻辑完全搞反了：

1. 创建了一个不完整的IDetails对象（缺少payload字段）
2. 把这个不完整对象转成Blob塞进新的FormData
3. 把FormData传给需要IDetails类型参数的方法

两种可行解决方案 #

方案1：服务端期望JSON格式请求（最常见）

补全IDetails的所有字段，直接传递完整对象，无需额外封装FormData：

// 先准备要放在payload里的FormData内容（比如文件、表单数据）
const formData = new FormData();
// 示例：formData.append('attachment', file);

// 创建完整的IDetails对象
const reqPayload: IDetails = {
  action: type,
  roleId: this.roleId,
  anotherId: this.anotherId,
  userDetails: this.userDetailsArray,
  payload: formData // 补上缺失的payload字段
};

// 直接传递完整的IDetails对象
this.sharedService.postDetails(reqPayload).subscribe(res => {});

同时确认postDetails方法的参数类型确实为IDetails，且内部能正确处理payload字段的FormData。

方案2：服务端必须接收multipart/form-data格式

这种情况需要修改postDetails的参数类型为FormData，并调整代码把所有字段直接塞进FormData：

const payload = new FormData();
// 直接添加普通字段（数字类型要转字符串，避免FormData自动转成文件）
payload.append('action', type);
payload.append('roleId', this.roleId.toString());
payload.append('anotherId', this.anotherId.toString());
// 把数组转成JSON字符串添加
payload.append('userDetails', JSON.stringify(this.userDetailsArray));
// 添加其他FormData内容（比如文件）
// payload.append('file', file);

// 现在传递FormData就不会报错
this.sharedService.postDetails(payload).subscribe(res => {});

如果坚持要把完整的业务数据转成Blob放进FormData，也要先修正reqPayload的类型（它缺少payload字段，不能用IDetails），同时确保postDetails的参数是FormData：

// 这里不要用IDetails类型，因为缺少payload字段
const reqPayload = {
  action: type,
  roleId: this.roleId,
  anotherId: this.anotherId,
  userDetails: this.userDetailsArray
};

const payload = new FormData();
const blobData = new Blob([JSON.stringify(reqPayload)], { type: 'application/json' });
payload.append('approverWorkflowReq', blobData);

this.sharedService.postDetails(payload).subscribe(res => {});

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