PageProps Type Errors in Next.js #142577
-
Select Topic AreaBug BodyHello everyone, However, during the build process, I encounter the following TypeScript error: Could you advise on how to correctly resolve these type issues or effectively suppress this error? I've attempted to use the comment // @ts-expect-error: params type does not match expected PageProps, but the error persists. Thank you for your assistance! |
Beta Was this translation helpful? Give feedback.
Replies: 8 comments 20 replies
-
💬 Your Product Feedback Has Been Submitted 🎉 Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users. Here's what you can expect moving forward ⏩
Where to look to see what's shipping 👀
What you can do in the meantime 💻
As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities. Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐ |
Beta Was this translation helpful? Give feedback.
-
error happens because TypeScript thinks params should be a Promise, not a plain object. export default async function Page({ params }: { params: { slug: string[] } } as any) { |
Beta Was this translation helpful? Give feedback.
-
Hi @Universe0809, To address these changes, you have a couple of options:
export default async function Page({ params }: { params: Params }) { This approach ensures that your application remains compatible with the latest version of Next.js. Thank you for taking my suggestion into account. |
Beta Was this translation helpful? Give feedback.
-
Here’s how I fix this issse:import Link from "next/link";
import photos, { Photo } from "@/lib/";
import PhotoCard from "@/components/photo-card";
export const generateStaticParams = () => {
return photos.map(({ id }) => ({
id: String(id),
}));
};
export type paramsType = Promise<{ id: string }>;
export default async function PhotoPage(props: { params: paramsType }) {
const { id } = await props.params;
const photo: Photo | undefined = photos.find((p) => p.id === id);
if (!photo) {
return <div>Photo not found</div>;
}
return (
<section className="py-24">
<div className="container">
<div>
<Link
href="/photos"
className="font-semibold italic text-sky-600 underline"
>
Back to photos
</Link>
</div>
<div className="mt-10 w-1/3">
<PhotoCard photo={photo} />
</div>
</div>
</section>
);
} |
Beta Was this translation helpful? Give feedback.
-
If you’ve encountered the same issue I did, it was due to having a monorepo with multiple React dependencies. Specifically, one of my packages was still using React 18, which caused a type mismatch. |
Beta Was this translation helpful? Give feedback.
-
I had the same issue but it was more than one file that needed to be changed. So if anyone encounters the same issue just run this command in the terminal. It will fix all the files for you. |
Beta Was this translation helpful? Give feedback.
-
Is next turning into a |
Beta Was this translation helpful? Give feedback.
Hi @Universe0809,
It appears that there are breaking changes in Next.js version 15 related to properties such as params. The official documentation highlights this issue (see: Next.js v15 Upgrade Guide).
To address these changes, you have a couple of options:
`type Params = Promise<{ slug: string[] }>;
export default async function Page({ params }: { params: Params }) {
const { slug } = await params;
}`
This approach ensures that your application remains compatible with the latest version of Ne…