Next.js 中 getServerSideProps 重定向报错问题解决

本文旨在解决 Next.js 中使用 getServerSideProps 进行页面重定向时遇到的类型错误问题。通过示例代码，我们将详细介绍如何正确配置 getServerSideProps 以实现页面重定向，避免常见的类型错误，并确保重定向功能正常工作。

在使用 Next.js 的 getServerSideProps 函数进行服务器端数据获取和页面重定向时，可能会遇到类型错误，尤其是在处理重定向逻辑时。 错误信息通常类似于：Type ‘Promise<{ redirect: { destination: string; }; props?: undefined; } | { props: {}; redirect?: undefined; }>’ is not assignable to type ‘Promise<GetServerSidePropsResult<{ [key: string]: any; }>>’。 这种错误通常是由于 redirect 对象缺少 statusCode 属性导致的。

问题分析

getServerSideProps 函数的返回值类型是 GetServerSidePropsResult，它需要包含 props 或 redirect 属性。当使用 redirect 属性时，需要同时指定 destination 和 statusCode。 缺少 statusCode 会导致类型检查失败，从而抛出错误。

解决方案

在 redirect 对象中添加 statusCode 属性，明确指定重定向的状态码。 通常情况下，可以使用 302 (Found) 或 307 (Temporary Redirect) 作为临时重定向的状态码，或者使用 301 (Moved Permanently) 作为永久重定向的状态码。

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

47

查看详情

以下是一个修正后的 getServerSideProps 示例：

import { GetServerSideProps } from 'next';
import { getSession } from '@auth0/nextjs-auth0';
export const getServerSideProps: GetServerSideProps = async (context) => {
const { req, res } = context;
const session = await getSession(req, res);
if (session) {
return {
redirect: {
destination: '/chat',
statusCode: 302, // 添加 statusCode 属性
},
};
}
return {
props: {},
};
};

代码解释：

1. import { GetServerSideProps } from ‘next’;: 导入 GetServerSideProps 类型，用于定义 getServerSideProps 函数的类型。
2. import { getSession } from ‘@auth0/nextjs-auth0’;: 导入 getSession 函数，用于获取用户会话信息（这里使用 Auth0）。
3. export const getServerSideProps: GetServerSideProps = async (context) => { … }: 定义 getServerSideProps 函数，它接收一个 context 对象，包含请求和响应信息。
4. const { req, res } = context;: 从 context 对象中解构出 req (请求) 和 res (响应) 对象。
5. const session = await getSession(req, res);: 使用 getSession 函数获取用户会话信息。
6. if (session) { … }: 检查用户是否已登录 (会话是否存在)。
7. return { redirect: { destination: ‘/chat’, statusCode: 302 } };: 如果用户已登录，则返回一个 redirect 对象，其中 destination 指定重定向的 URL (/chat)，statusCode 指定重定向的状态码 (302)。
8. return { props: {} };: 如果用户未登录，则返回一个空的 props 对象，表示不进行重定向，而是渲染当前页面。

注意事项：

• 根据实际情况选择合适的 statusCode。 302 适用于临时重定向，而 301 适用于永久重定向。
• 确保在 redirect 对象中同时指定 destination 和 statusCode，以避免类型错误。
• 如果需要传递 props 到重定向的页面，可以将 props 与 redirect 对象一起返回，但通常情况下，重定向不需要传递 props。
• 在开发环境中，Next.js 可能会显示一些警告信息，但只要代码能够正常工作，可以忽略这些警告。

总结

通过在 getServerSideProps 函数的 redirect 对象中添加 statusCode 属性，可以有效解决 Next.js 中使用 getServerSideProps 进行页面重定向时遇到的类型错误。 确保代码符合 GetServerSidePropsResult 类型的要求，可以避免类型检查失败，并确保重定向功能正常工作。 此外，根据实际情况选择合适的 statusCode，并注意其他相关事项，可以更好地利用 getServerSideProps 实现服务器端数据获取和页面重定向。