如何解决如何从 getStaticProps来自 Next.JS返回 { redirect: { destination: "/some-path"}} 而 Typescript 没有错误?
问题
我在 Typescript 中使用 Next.JS。如果数据不存在,我尝试返回重定向时出现错误。
代码
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' 不可分配给类型 'Promise
输入 '{ 重定向:{ 目的地:字符串; }; notFound?:未定义;道具?:未定义;重新验证?:未定义; } | { 未找到:真;重定向?:未定义;道具?:未定义;重新验证?:未定义; } | { 道具: { ...; };重新验证:数量;重定向?:未定义; notFound?:未定义; }' 不可分配给类型 'GetStaticPropsResult'。
输入 '{ 重定向:{ 目的地:字符串; }; notFound?:未定义;道具?:未定义;重新验证?:未定义; }' 不可分配给类型 'GetStaticPropsResult'。
输入 '{ 重定向:{ 目的地:字符串; }; notFound?:未定义;道具?:未定义;重新验证?:未定义; }' 不能赋值给类型 '{ props: { [key: string]: any; };重新验证?:数字 |布尔值 |不明确的; }'。
属性“道具”的类型不兼容。
类型 'undefined' 不能分配给类型 '{ [key: string]: any; }'.ts(2322)
if (!data) {
return {
redirect: {
destination: "/no-data",};
}
解决方法
根据本文档,https://nextjs.org/docs/basic-features/data-fetching 代码应该是这样的。目的地和永久都需要。
if (!data) {
return {
redirect: {
destination: "/",permanent: false,},};
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。