Next.js开发Discord机器人仪表盘遇400及序列化错误求助

核心问题分析 #

你遇到的两个问题存在关联：

1. 400状态码：API请求验证不通过，大概率是Cookie传递格式错误或会话失效
2. SerializableError：getServerSideProps返回的guilds包含不可序列化字段（如undefined、null），不符合Next.js的序列化要求

分步解决方案 #

1. 修复Cookie验证逻辑与返回格式 #

你的validateCookies并非异步函数，无需await；同时Next.js的redirect必须遵循{ destination: string, permanent: boolean }格式，之前的写法不符合规范：

// 修正后的validateCookies
export const validateCookies = (ctx: GetServerSidePropsContext) => {
    const sessionID = ctx.req.cookies['connect.sid'];
    return sessionID ? { Cookie: `connect.sid=${sessionID}` } : null;
};

2. 修正API请求的Cookie传递与数据处理 #

确保axios正确传递Cookie，同时对返回数据做序列化兼容处理，避免不符合类型定义的字段导致错误：

// 修正后的fetchMutualGuilds
export const fetchMutualGuilds = async (context: GetServerSidePropsContext) => {
    const headers = validateCookies(context);
    if (!headers) return { redirect: { destination: '/', permanent: false } };
    
    try {
        const { data: guilds } = await axios.get<Guild[]>(`${API_URL}/guilds`, {
            headers,
            withCredentials: true, // 确保Cookie正确传递到后端
        });
        
        // 处理不可序列化字段，保证所有字段匹配Guild类型
        const serializableGuilds = guilds.map(guild => ({
            ...guild,
            icon: guild.icon || '', // 将null/undefined转为空字符串
            permissions: guild.permissions || '0',
            features: guild.features || [],
            owner: Boolean(guild.owner) // 强制转为布尔值
        }));
        
        return { props: { guilds: serializableGuilds } };
    } catch (err) {
        console.error('获取服务器列表失败:', err);
        return { redirect: { destination: '/', permanent: false } };
    }
};

3. 后端API验证排查 #

• 检查后端是否正确解析connect.sid Cookie，确认会话未过期或未被篡改
• 若前后端跨域，后端需配置CORS允许credentials，并指定允许的前端域名

4. 序列化合规性检查 #

Next.js要求getServerSideProps返回的props必须是JSON可序列化的，需注意：

• 禁止返回undefined、函数、Symbol等非JSON类型
• 所有字段必须严格匹配Guild类型定义（比如icon不能为null，需转为空字符串）

额外调试建议 #

• 查看后端API的400错误日志，明确具体错误原因（如会话无效、权限不足）
• 打印guilds原始返回数据，确认是否存在不符合类型定义的字段

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