Next.js中getServerSideProps返回的data偶发undefined问题咨询

问题诱因 #

首先排除你猜测的「getServerSideProps未完成就触发页面加载」的可能：Next.js的getServerSideProps是服务端同步执行的逻辑，只有执行完成返回props后才会渲染页面返回给客户端，不会出现提前加载的情况。偶发undefined的实际诱因大概率是以下几个：

• fetch请求缺少状态校验：fetch原生只有网络错误时会抛出异常，后端返回4xx/5xx状态码时不会报错，此时你调用getBotData.json()拿到的是后端报错返回的非预期结构，botData.data自然为空
• 路由参数提取逻辑不稳定：你手动切割req.url拿id的方式不兼容带查询参数的场景（比如访问路径为/bots/xxx?utm_source=xx时，切割后拿到的id会携带查询参数，传给后端后查询不到数据返回空）
• 变量未定义：代码中user_id: id里的id没有在getServerSideProps的作用域内定义，偶发能拿到上层作用域的id值、拿不到的时候传给后端的参数错误，导致返回空
• 服务端函数超时：如果后端接口耗时过长，超过部署平台Serverless函数的超时阈值（多数平台默认10s），函数会被强制终止，无法返回正常数据

修复方案 #

1. 逻辑优化点 #

• 改用Next.js动态路由原生参数拿id，避免手动切割url出错
• 补充fetch状态校验、全链路错误捕获，异常场景可以返回404或者默认数据
• 补全未定义的id变量的取值逻辑（示例中假设你是从请求cookie里拿用户id，可根据实际场景调整）
• 增加fetch超时控制，避免长时间等待被平台熔断
• 组件层加兜底渲染逻辑，避免空值报错

2. 修改后完整代码 #

import Head from 'next/head'

export default function Id({ data, error }) {
    // 异常兜底渲染
    if (error || !data?.botData) {
        return <div>数据加载失败，请刷新重试</div>
    }
    return ( 
        <div>
            <Head>
                <meta charSet="UTF-8" />
                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>{ data.botData?.username }</title>
                <link rel='icon' href={ `https://cdn.discordapp.com/avatars/${data.botData._id}/${data.botData.avatar}.png?size=4096` } />
            </Head>
        </div>
     )
}

export async function getServerSideProps({ req, query }) {
    try {
        // 用原生query拿动态路由id，比手动切割url更稳定
        const botId = query.id
        // 补全user_id的取值逻辑，这里示例从cookie拿，可根据实际调整
        const userId = req.cookies.user_id || ''
        if (!botId) {
            return { notFound: true }
        }

        // 加fetch超时控制，这里设置8s超时，避免超过平台阈值
        const controller = new AbortController()
        const timeout = setTimeout(() => controller.abort(), 8000)

        const getBotData = await fetch('你的后端接口地址', {
            body: JSON.stringify({
                id: botId,
                user_id: userId
            }),
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            signal: controller.signal
        })
        clearTimeout(timeout)

        // 校验接口返回状态
        if (!getBotData.ok) {
            throw new Error('接口请求失败')
        }

        const botData = await getBotData.json()
        const data = {
            botData: botData.data || {},
            botInfo: botData.info || {},
            comments: botData.comments || []
        }

        return {
            props: {
                data
            }
        }
    } catch (err) {
        // 异常场景返回错误标识，或者直接返回notFound/redirect
        return {
            props: {
                data: null,
                error: err.message
            }
        }
    }
}

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