import { medusa } from "@/app/requests/medusaClient";
import { useState, useEffect, JSXElementConstructor, PromiseLikeOfReactNode, ReactElement, ReactNode, ReactPortal } from "react";
import { Product} from "@/app/models/productModel";
import { GetStaticPaths, GetStaticPathsContext, GetStaticProps, InferGetStaticPropsType, NextPage, NextPageContext } from "next";
import { ParsedUrlQuery } from "querystring";
interface Iparams extends ParsedUrlQuery {
productSlug: string;
}
interface ProductsProps {
product:Product;
}
const ProductPage:NextPage<ProductsProps> = ({product}) => {
console.log(product);
return (
<>
<h1>Product details</h1>
<div>
<h2>
{product?.title}
</h2>
</div>
</>
)
}
export const getStaticPaths:GetStaticPaths = async () =>{
const response = await medusa.products.list();
const paths = response.products.map((product:Product) => {
return {
params: {
productSlug: product.id
}
}
})
console.log(paths);
return {
paths,
fallback:false
}
}
export const getStaticProps: GetStaticProps<ProductsProps,Iparams> = async(context) => {
console.log("GET STATIC PROPS");
const productSlug=context.params!
console.log('id', productSlug.productSlug);
const res = await fetch(`http://localhost:9000/store/products/${productSlug.productSlug}`)
const product = (await res.json()) as Product;
return {
props: {
product
}
}
}
export default ProductPage;字符串
这是我在medusa服务器上的动态路由代码，但是getStaticProps从来没有运行过，所以ProductPage中的product是未定义的。
另外，当我运行下一个构建时，它会显示此错误：
类型错误：输入“OmitWithTag<typeof import（“C：/Users/Katarina/Desktop/medusaProductProject/product_project/src/app/pages/products/[productSlug]/page”），“revalidate”tProject/product_project/src/app/pages/products/[productSlug]/page”），“revalidate”|“元数据”|“预设值”|“元数据”|“预设值”|“配置”|...还有6个...|“generateMetadata”，“">”doeaint“{ [x：string]：never;}”. s不满足约束“{ [x：string]：never;}"。属性”getStaticPaths“与索引签名不兼容。类型”GetStaticPaths "不可分配给类型“never
我找了这么多的解决方案，没有工作，有人可以帮助我吗？
我尝试了不同的方法来写一个代码在Typescript，但我不明白的问题。
3条答案
按热度按时间dxxyhpgq1#
我今天也有同样的问题。
我使用的是NextJs的最新版本（13.4.9）和应用程序文件夹结构。
我已经有一段时间没有使用前端了，但是我在文档中发现了一种处理动态路由和静态路径的新方法。
我可以使用generateStaticParams代替getStaticPaths和getStaticProps解决这个问题，here's an example.
我希望这对你有帮助。
3duebb1j2#
我得到了同样的错误，但出于不同的原因。在我的情况下，这是因为我在文件中没有默认值的情况下导出此页面。
生成错误的代码：
字符串
解决方法：
型
来源：https://github.com/vercel/next.js/discussions/48724#discussioncomment-5884311
P.S.也许有人会读这个答案，这将是有用的
gab6jxml3#
当页面组件文件中的导出与Next.js的预期冲突时，通常会出现您遇到的错误。请确保以下内容：
默认导出：您的页面组件（[productSlug].tsx）应该具有页面组件本身的默认导出。
Next.js函数的命名导出：只有getStaticProps和getStaticPaths应该是此文件中的命名导出。它们不应该包含在默认导出中或导出到任何其他对象中。
TypeScript类型：仔细检查你的TypeScript类型。确保你没有导出任何与Next.js数据获取方法（getStaticProps和getStaticPaths）不直接相关的类型、接口或组件。
正确的结构如下所示：
字符串