TypeScript中createBudgets方法返回Promise<Budget[]>报错的解决咨询

咱先捋清楚问题根源：你现在直接返回了Budget[]类型的budgets数组，但方法声明明确要求返回Promise<Budget[]>，类型不匹配肯定会报红。而且更关键的是，forEach里的async回调根本没被等待——forEach不会处理异步函数，你刚启动几个异步的set操作，就直接把空的/没填完的budgets返回了，逻辑上也有漏洞。

给你两种靠谱的修改方案，按需选就行：

方案一：顺序执行异步操作（适合有依赖顺序的场景） #

把方法改成async，用for...of代替forEach，这样能确保每个异步操作完成后再进行下一个，同时async方法会自动把返回值包装成Promise，完美匹配返回类型要求：

async createBudgets(data: Budget[], projectId: string): Promise<Budget[]> {
  const budgets: Budget[] = [];
  // 用for...of遍历，原生支持await等待异步操作
  for (const d of data) {
    const budgetId: string = this.fireStore.createId();
    d.id = budgetId;
    budgets.push(d);
    await this.fireStore.doc<Budget>(`projects/${projectId}/budgets/${budgetId}`).set({
      id: budgetId,
      amount: d.amount,
      contingency: d.contingency,
      budgetGroup: d.budgetGroup,
      creationTime: moment().format()
    });
  }
  return budgets;
}

方案二：并行执行异步操作（性能更优，无顺序依赖时推荐） #

如果不需要按顺序创建预算，用Promise.all并行处理所有异步操作，效率更高，而且返回值天然就是Promise<Budget[]>：

createBudgets(data: Budget[], projectId: string): Promise<Budget[]> {
  // 把每个数据项转换成一个返回Budget的Promise
  const budgetPromises = data.map(async (d) => {
    const budgetId: string = this.fireStore.createId();
    // 复制原对象避免修改原数组元素，代码更健壮
    const budget = { ...d, id: budgetId };
    await this.fireStore.doc<Budget>(`projects/${projectId}/budgets/${budgetId}`).set({
      id: budgetId,
      amount: budget.amount,
      contingency: budget.contingency,
      budgetGroup: budget.budgetGroup,
      creationTime: moment().format()
    });
    return budget;
  });
  // Promise.all会等待所有Promise完成，直接返回符合要求的Promise<Budget[]>
  return Promise.all(budgetPromises);
}

两种方案都能解决你的类型错误，同时修复了原代码中异步操作没被等待的逻辑问题～

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