如何在getStaticProps中执行两次Fetch？数据无法存入变量

你的问题核心是异步操作未被正确等待：遍历宝可梦列表发起的二次Fetch都是异步任务，但你没有等待这些任务全部完成就直接返回了products数组。此时products还没被填充任何数据，自然返回空数组。

修复方案 #

用Promise.all批量处理所有二次Fetch请求，确保所有异步操作完成后再返回结果：

export const getStaticProps: GetStaticProps = async () => {
    let products: any = [];
    const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20&offset=0');
    const list = await response.json();

    // 生成所有请求的Promise数组，用Promise.all等待全部完成
    products = await Promise.all(
        list.results.map((e: any) => 
            fetch(`https://pokeapi.co/api/v2/pokemon/${e.name}`).then(res => res.json())
        )
    );

    return {
        props: { products },
    }
}

关键修改说明 #

1. Promise.all管理异步任务：list.results.map返回包含所有二次Fetch Promise的数组，await Promise.all会等待数组中所有Promise都完成后，把结果按顺序组成新数组赋值给products。
2. 无需手动push：直接接收Promise.all的返回结果，既保证数据顺序和原列表一致，也避免了异步push导致的时序问题。
3. 完整等待异步流程：整个二次Fetch的批量操作被await，确保getStaticProps在所有详细数据获取完成后才执行return。

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