Next.js开发中getStaticPaths返回值不符合预期问题求助

核心问题点 #

• getEvents函数未返回异步请求结果
  你编写的getEvents没有在axios.post前添加return关键字，函数执行后默认返回undefined。then回调内部的return仅作用于回调本身，不会作为getEvents的返回值向外传递。
• 异步请求未做等待处理
  axios请求是异步操作，即便补全了return，getEvents返回的也是Promise实例，你在getStaticPaths中调用时没有添加await关键字，拿到的是未解析的Promise对象，不符合Next.js要求paths必须是数组的规则。

你能正常打印paths的原因是：then回调会在接口请求成功后异步执行，打印操作是在请求完成后触发的，所以输出内容正确，但此时getStaticPaths早已执行完毕，返回的paths是无效值。

修复代码 #

第一步：修改getEvents函数，补全返回逻辑，推荐使用async/await写法更易维护 #

export const getEvents = async () => {
    try {
        const r = await axios.post(`${globals.api_endpoint}getEvents.php`, {
            action: 'getStaticPaths'
        });
        if (!r.data.error) {
            return r.data.map(index => {
                return {
                    params: {
                        id: index.event_id
                    }
                };
            });
        }
        // 接口返回错误时返回空数组避免构建报错
        return [];
    } catch (err) {
        // 请求异常时的错误处理
        console.error('获取路径失败：', err);
        return [];
    }
};

第二步：修改getStaticPaths，添加await等待异步结果 #

export const getStaticPaths = async () => {
    const paths = await getEvents();
    return {
        paths,
        fallback: false
    };
};

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