Next.js getStaticProps调用独立服务时出现Promise无法JSON序列化报错

报错完整信息：
Error: 根路由"/"中getStaticProps方法返回的.b属性值无法完成序列化。
报错触发逻辑：传入的[object Promise]类型对象不支持JSON序列化，仅允许返回可进行JSON序列化的数据类型。

触发场景 #

• 原本在getStaticProps内部直接编写fetch请求逻辑时，页面功能可正常运行
• 为了减少代码冗余，尝试将所有fetch请求逻辑统一抽离到独立JS文件的WordpressService方法中
• 完成逻辑抽离、调用服务方法获取WordPress页面数据传入页面props时，触发上述序列化报错

问题根因 #

WordpressService.getPageByIdTest本身是带async标识的异步函数，调用异步函数时如果不等待Promise状态变更，拿到的返回值本身就是一个Promise实例，而非接口返回的纯数据。
原代码中给变量b赋值的步骤没有加await，最终传入props的是未完成resolve的Promise对象——而getStaticProps明确要求，props字段的所有值必须是可直接JSON序列化的纯JS数据类型，不能传入函数、Promise、类实例这类非可序列化对象，因此触发序列化报错。

修正方案 #

在调用异步的getPageByIdTest方法时，补全await关键字，等待异步请求完成、拿到真实的接口返回数据后，再将数据传入props。

修正后的核心代码 #

export async function getStaticProps() {
  // 补全await，等待异步服务方法返回真实数据
  let b = await WordpressService.getPageByIdTest(50);
  return {
    props: {
      b: b,
    }, 
    revalidate: 30     
  }
}

const WordpressService = {
  async getPageByIdTest(id) {
      const resIndexPage = await fetch(`${url}pages/${id}`);
      const indexPageData = await resIndexPage.json();
      return indexPageData;
  }
}

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