使用getServerSideProps重定向时出现TypeScript类型错误

我希望用户登录后重定向至/chat页面，使用Auth0处理认证逻辑。目前重定向功能正常，但出现TypeScript类型错误——我返回空对象作为props，不确定该定义何种接口，尝试调整GetServerSideProps类型但无效。

报错信息 #

Type '(context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => Promise<{ redirect: { destination: string; }; props?: undefined; } | { ...; }>' is not assignable to type 'GetServerSideProps'.
Type 'Promise<{ redirect: { destination: string; }; props?: undefined; } | { props: {}; redirect?: undefined; }>' is not assignable to type 'Promise<GetServerSidePropsResult<{ [key: string]: any; }>>'.
Type '{ redirect: { destination: string; }; props?: undefined; } | { props: {}; redirect?: undefined; }' is not assignable to type 'GetServerSidePropsResult<{ [key: string]: any; }>'.
Type '{ redirect: { destination: string; }; props?: undefined; }' is not assignable to type 'GetServerSidePropsResult<{ [key: string]: any; }>'.
Type '{ redirect: { destination: string; }; props?: undefined; }' is not assignable to type '{ props: { [key: string]: any; } | Promise<{ [key: string]: any; }>; }'.
Types of property 'props' are incompatible.
Type 'undefined' is not assignable to type '{ [key: string]: any; } | Promise<{ [key: string]: any; }>'.ts(2322)

相关代码 #

getServerSideProps代码 #

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req, res } = context;
  const session = await getSession(req, res);

  if (session) {
    return {
      redirect: {
        destination: "/chat",
      },
    };
  }

  return {
    props: {},
  };
};

页面组件代码 #

import Head from "next/head";
import Link from "next/link";
import { useUser } from "@auth0/nextjs-auth0/client";
import { getSession } from "@auth0/nextjs-auth0";
import { GetServerSideProps } from "next";

export default function Home() {
  const { isLoading, error, user } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      <Head>
        <title>Ask Me - Login or Signup</title>
      </Head>
      <div>
        <div>
          {user && <Link href="/api/auth/logout">Logout</Link>}
          {!user && (
            <>
              <Link
                href="/api/auth/login"
              >
                Login
              </Link>
              <Link
                href="/api/auth/signup" >
                Signup
              </Link>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

报错原因是GetServerSideProps默认泛型要求props必须是包含任意键值的对象或Promise，而重定向时返回的对象没有props字段，导致TypeScript认为props是undefined，不符合类型要求。

有两种简单的解决方式：

方式一：显式指定GetServerSideProps的泛型为{} #

因为页面组件不需要接收任何props，给GetServerSideProps指定泛型参数为{}，让TypeScript允许返回空对象或不带props的重定向对象：

export const getServerSideProps: GetServerSideProps<{}> = async (context) => {
  const { req, res } = context;
  const session = await getSession(req, res);

  if (session) {
    return {
      redirect: {
        destination: "/chat",
      },
    };
  }

  return {
    props: {},
  };
};

方式二：重定向时显式返回空props #

在重定向的返回对象中添加props: {}，确保两种返回情况都符合props的类型要求：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { req, res } = context;
  const session = await getSession(req, res);

  if (session) {
    return {
      redirect: {
        destination: "/chat",
      },
      props: {}
    };
  }

  return {
    props: {},
  };
};

两种方法都能解决类型错误，推荐第一种方式，更贴合组件不需要props的实际情况。

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