NextJS中使用getStaticProps调用API报错，求问题排查

问题核心原因 #

你的代码在异步请求处理上存在三个关键错误：

• 未等待异步请求完成：axios.get()返回的是Promise对象，你直接赋值给res却没加await，此时res是Promise实例而非接口响应结果，自然拿不到res.data。
• Promise链式调用未传递数据：即使使用then回调，你只在里面打印了res.data，却没把数据返回或赋值给外部变量，后续代码无法获取接口返回内容。
• 不必要的JSON.stringify：NextJS会自动序列化getStaticProps返回的props，手动转成字符串会导致组件拿到的是字符串而非预期的对象。

修正后的代码（推荐async/await写法） #

export async function getStaticProps(){
    try {
        // 用await等待请求完成，拿到真实响应对象
        const res = await axios.get("/api/teacher/loadstudents");
        console.log(res.data);
        // 直接传递原始数据，NextJS自动处理序列化
        return {
            props:{data: res.data}
        }
    } catch (err) {
        console.log(err);
        // 出错时返回默认数据，避免页面报错
        return {
            props:{data: []}
        }
    }
 }

const TeacherMainPage = (props)=>{
    var classCode = "XZLE123"; 
    console.log("These are the props: ", props) ;
    // 现在可以直接用props.data操作对象
}

链式调用写法（若坚持使用） #

export async function getStaticProps(){
    let studentdata = [];
    // 加await等待整个Promise链完成
    await axios.get("/api/teacher/loadstudents")
    .then(res=>{                        
        console.log(res.data);
        // 将数据赋值给外部变量
        studentdata = res.data;
    })
    .catch(err => {console.log(err)}) 

    return {
        props:{data: studentdata}
    }
 }

补充说明 #

之前用names常量正常，是因为它是同步赋值的变量，不需要处理异步逻辑。而axios接口请求是异步操作，必须等待请求完成后才能获取数据，这是异步编程的基本要求。

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