Next.js中getServerSideProps返回数据页面接收始终为undefined求助

核心问题 #

你代码存在字段名不匹配问题：getServerSideProps 返回的props对象中只包含results字段，但页面组件AdminDashboard解构的是data字段，因此必然返回undefined。

修复方案 #

二选一即可：

• 修改组件接收的字段名，将解构参数从data改为results

export default function AdminDashboard( { results } ) {
    console.log(results) // 可正常输出[1,2,3]
    // 其余逻辑不变
}

• 修改getServerSideProps返回的props字段名，将results改为data

const obj = {
    props: {
        data: [1,2,3],
        // 如果要传递数据库查询结果，直接赋值即可：data: e
    },
}

通用排查步骤 #

后续遇到同类问题可按以下顺序排查：

• 打印getServerSideProps最终返回的obj.props完整内容，确认返回的字段名、值均符合预期
• 不要直接解构组件参数，先打印完整props对象，确认服务端返回的所有字段：

export default function AdminDashboard(props) {
    console.log('完整props：', props) // 可直接看到返回的是{results: [1,2,3]}，不存在data字段
    // 其余逻辑不变
}

• 检查是否存在拼写错误：你当前代码中还有笔误console.log(obj.props.requests)，你定义的是results，打印requests也会返回undefined
• 确认getServerSideProps没有添加重定向、404等逻辑，不会跳过props返回

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