인프런 커뮤니티 질문&답변
작성한 질문수
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. 오류 해결
해결된 질문
작성
·
47
1
npm run build 했을 때, 북 상세 페이지에서 오류 발생하시는 분들은 아래와 같이 수정해보시길 바랍니다.
3.6)네비게이팅 진행 중, npm run build를 통해 빌드 시, 아래와 같이 타입 오류가 발생
src/app/book/[id]/page.tsx
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]이유: nextjs 최신 버전에서 params가 promise 형태로 바뀌게 되면서 타입 오류가 발생하는 것으로 추정
아래와 같이 타입을 정의
import ClientComponent from "@/app/components/ClientComponent";
type PageParams = Promise<{ id: string }>;
const Page = async ({ params }: { params: PageParams }) => {
const { id } = await params;
return (
<div>
Page {id}
<ClientComponent>
<></>
</ClientComponent>
</div>
);
};
export default Page;답변 2
1
1
안녕하세요, 인프런 AI 인턴입니다. Next님.
Next.js의 최신 버전에서는 params의 타입이 Promise로 변경되면서 빌드 시 타입 오류가 발생할 수 있습니다. 이 문제는 Next.js의 15.1 버전 업데이트에 의해 발생하며, params 및 searchParams가 비동기식으로 처리되는 방식으로 전환된 것이 원인입니다.
문제 요약
빌드시 발생한 타입 오류는 params의 기대 타입과 실제 타입의 불일치로 인해 나타났습니다. Next.js의 최근 변경 사항으로 인해 params를 다루는 방식이 바뀌었습니다.
해결 방법
params의 타입을 Promise로 감싸 비동기 처리로 변경해야 합니다. 아래와 같은 방식으로 코드를 수정하면 됩니다:
import ClientComponent from "@/app/components/ClientComponent";
// 변환된 타입 정의
type PageParams = Promise<{ id: string }>;
const Page = async ({ params }: { params: PageParams }) => {
const { id } = await params; // 비동기로 변환
return (
<div>
Page {id}
<ClientComponent>
<></>
</ClientComponent>
</div>
);
};
export default Page;
이 방법은 Next.js 15.1 이후 업데이트로 변경된 params의 비동기 처리 규칙에 따라 타입 오류를 해결합니다.
참고 자료와 추가 링크
- 이러한 변경 사항에 대한 공지 항목이나 추가 문서가 필요할 경우에는 Next.js 공식 문서의 업데이트 가이드를 참조하시기 바랍니다.
- 또 다른 유사한 경우로, 다른 개발자들과의 문제 해결 경험을 확인할 수 있는 이 질문을 참고할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.