如何从 getStaticProps 返回重定向而不从 TypeScript 出错？

Posted 2023-03-30

【中文标题】如何从 getStaticProps 返回重定向而不从 TypeScript 出错？

【英文标题】：How to return redirect from getStaticProps without error from TypeScript?

【发布时间】：2021-08-21 17:43:58

【问题描述】：

问题

我将 Next.js 与 TypeScript 一起使用。如果数据不存在，当我尝试返回重定向时出现错误。

代码

import  GetStaticProps  from "next";
import fs from "fs/promises";
import path from "path";

function HomePage( products :  products:  id: string; title: string [] ) 
  return (
    <ul>
      products.map((product) => 
        <li key=product.id>product.title</li>;
      )
    </ul>
  );


export const getStaticProps: GetStaticProps = async () => 
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData.toString());

  // THE PROBLEM
  if (!data) 
    return 
      redirect: 
        destination: "/no-data",
      ,
    ;
  

  if (data.products.length === 0) 
    return  notFound: true ;
  

  return  props:  products: data.products , revalidate: 10 ;
;

export default HomePage;

错误信息

Type '() => Promise' 不可分配给类型 'GetStaticProps'。输入'承诺' 是 不可分配给类型 'Promise>'。 输入'重定向：目的地：字符串； ;未找到？：未定义；道具？：未定义；重新验证？：未定义； | 未找到：真； 重定向？：未定义；道具？：未定义；重新验证？：未定义； | 道具： ...; ;重新验证：数字；重定向？：未定义；未找到？： 不明确的; ' 不可分配给类型 'GetStaticPropsResult'。 输入'重定向：目的地：字符串； ;未找到？：未定义；道具？：未定义；重新验证？：未定义； ' 不是 可分配给类型 'GetStaticPropsResult'。 输入'重定向：目的地：字符串； ;未找到？：未定义；道具？：未定义；重新验证？：未定义； ' 不是 可分配给类型 ' props: [key: string]: any; ;重新验证？： 号码 |布尔值 |不明确的; '。 属性“道具”的类型不兼容。 类型 'undefined' 不能分配给类型 ' [key: string]: any; '.ts(2322)

这个错误是由这段代码引起的

if (!data) 
    return 
      redirect: 
        destination: "/no-data",
      ,
    ;
  

【参考方案1】：

根据这个文档，https://nextjs.org/docs/basic-features/data-fetching 的代码应该是这样的。目的地和永久都需要。

if (!data) 
    return 
      redirect: 
        destination: "/",
        permanent: false,
      ,
    ;