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 实现服务器端数据获取和页面重定向。

以上就是Next.js session ai red String if Session const 值类型 JS undefined 对象 promise