NextJS getStaticPaths中循环创建对象遇Promise pending问题求助

你的核心问题是Array.map搭配async回调时，会返回Promise数组，而非直接得到处理后的结果。同时代码还存在嵌套数组未扁平化、异常分支未处理的问题，以下是修正方案：

问题分析 #

1. data.map(async ({ params }) => { ... })中，每个回调都是异步函数，默认返回Promise，所以allPages是一组处于pending状态的Promise，直接返回不会等待所有异步操作完成。
2. 当siteInfo不存在时，回调返回undefined，会混入结果数组。
3. 每个异步回调返回的是一个页面对象数组，最终会得到二维数组，不符合getStaticPaths要求的一维结构。

修正后的代码 #

1. 重构路径生成函数 #

const getPaths = async () => {
  // 用Promise.all等待所有异步请求完成
  const pageGroups = await Promise.all(
    data.map(async ({ params }) => {
      const site = params.site;
      const siteInfo = await getSiteInfo(site);
      
      // 若siteInfo不存在或为空数组，返回空数组跳过后续处理
      if (!siteInfo?.length) return [];
      
      const siteId = siteInfo[0].site_id;
      const allPages = await getPages(site, siteId);
      
      // 转换为getStaticPaths需要的结构
      return allPages.map(page => ({
        params: {
          site: params.site,
          slug: page.page_url,
        },
      }));
    })
  );

  // 扁平化二维数组，得到一维的paths列表
  return pageGroups.flat();
};

2. 在getStaticPaths中使用 #

export async function getStaticPaths() {
  const paths = await getPaths();
  
  return {
    paths,
    fallback: false, // 根据业务需求设置为true/false/blocking
  };
}

3. 测试时正确获取结果 #

如果需要直接测试路径生成结果，需用await或.then等待Promise完成：

// 方式1：async立即执行函数
(async () => {
  const paths = await getPaths();
  console.log(paths);
})();

// 方式2：使用.then
getPaths().then(paths => console.log(paths));

关键改动说明 #

• Promise.all：等待所有异步回调的Promise完成，返回处理后的结果数组。
• 空数组兜底：当siteInfo不存在时返回空数组，避免结果中混入undefined。
• flat()扁平化：将每个站点对应的页面数组，合并为一个一维数组，符合getStaticPaths的参数要求。

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