Exploring PageProps type resolution through a fundamental demonstration

Currently, I am working with Next.js version 15. In my code, I define my page in the following manner:

export default async function Page({ params }: { params: { slug: string[] } }) 
{ ... }

However, during the project build process, I encounter the following error message:

Type error: Type '{ params: { slug: string[]; }; }' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

I have tried to resolve the types or ignore this error using a comment 

// @ts-expect-error: params type does not match expected PageProps
, but unfortunately it does not help in ignoring this error.

Could someone please guide me on what mistake I might be making? Any assistance would be greatly appreciated. Thank you, Stackoverflow!

typescriptnext.js

Answer №1

There may be an issue related to the latest update in version 15, which includes breaking changes for properties like params. You can find more information about this at this link.

To address this, you have the option to downgrade or modify your code to await the params as shown below:

type Params = Promise<{ slug: string[] }>

export default async function Page({ params }: { params: Params }) {  
  const { slug } = await params
}

Answer №2

I encountered the same issue. Following Thrumbo's solution fixed the problem for me, although I had to eliminate the array[] operator on the string.

type Parameters = Promise<{ slug: string }>

export default async function Page({ parameters }: { params: Parameters }) {  
  const { slug } = await parameters
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid triggering the onClick event on specific elements in React by utilizing event delegation or conditional rendering

programming environment react.js typescript next.js How can I prevent the onClick process from being triggered when the span tag is pressed? What is the best approach? return ( <div className="padding-16 flex gap-5 flex-container" ...

reactjstypescriptnext.js

The update operation for the Reference object encountered an error: The first argument includes a function within a

I'm encountering errors while attempting to create a simple cloud function that detects likes on the RD and then adds posts to a user's timeline. How can I resolve this issue? What mistake am I making? (The 2 errors below are from the Firebase ...

typescriptfirebasefirebase-realtime-databasegoogle-cloud-functions

Unlocking the Power of Runtime Environment Variables in NextJS

Sorry for the newbie question, but I could use some advice. I'm inquiring about the best deployment strategy for self-hosted NextJS applications (such as with docker or Kubernetes). Currently, I am building once and then shipping to different environ ...

environment-variablesnext.js

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

After working as a React developer for quite some time, my workplace recently introduced Typescript, which I am still getting familiar with. I implemented a custom hook for managing cookies, but the function it returns is generating an error. Here's ...

javascriptreactjstypescript

Importing images with relative paths from a JSON file does not work as expected in Next.js

JSON file data portion: { "categories": [ { "id": 1, "category_slug": "food_supplements", "title": "Food Supplements", "image": "/../../public/images/foodSupplements.png", } ] } Component data portion that displays the ...

javascriptreactjsnext.js

Tips for simulating a configuration dependency using Proxyquire in TypeScript

Within my codebase, there exists a config.ts file that contains the following method: // Config interface is utilized to specify expected values export default function getConfig(): Config { return {amount: 50} } In a specific class located at ../src ...

node.jstypescriptmockingproxyquire

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

How do I troubleshoot a TypeScript error when importing a custom font, such as a Google font? <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> Below is the specific error message: Type 'boolean' is ...

typescriptfontsnext.js

What is the process for linking my component to my socket.io server?

I am facing a challenge in setting up a socket.io server to facilitate communication between two components: a command interface for sending data, and an overlay component for receiving it. Below is the code snippet: interface.component.html : <input ...

angulartypescriptsocket.io

Trying to filter an array of number|undefined in TypeScript to only include numbers is not identified as an array of numbers

Below is the code snippet: type TEntity = Array<{ size?: number }> const someVar: TEntity = //@ts-ignore getFromSomewhere() function isNumber(input: any): input is number { return !isNaN(Number(input)) } const sizes1: number[] = so ...

typescript

What is the best way to dynamically disable choices in mat-select depending on the option chosen?

I was recently working on a project that involved using mat-select elements. In this project, I encountered a specific requirement where I needed to achieve the following two tasks: When the 'all' option is selected in either of the mat-select e ...

javascriptangulartypescriptangular-materialmat-select

An email value being recognized as NULL

create-employee.html <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <span><input type="text" [required]="!standingQueue" class="form-control" name="exampleInputEmail1" ...

angulartypescript

What is the method for defining a monkey patched class in a TypeScript declarations file?

Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...

javascripttypescripttypescript-definitions

Display more/hide less form using div elements in a NextJS project

Looking to create a hidden block of amenities on my hotel website that can be expanded and collapsed with buttons in NextJS using tailwind-css. How can I achieve this functionality? Example 1: https://i.stack.imgur.com/BbrUj.png Example-2: https://i.stac ...

javascriptreactjsnext.jstailwind-css

What is the method for defining a constant data type with a class property data type in typescript?

I've been working on developing a nestjs API and have been using classes to define my entities. For instance, I have created a Customer entity as shown below: export class Customer { id: number; name: string; } Now, while working on my Custom ...

typescriptnestjstypescript-class

Service Activation Button Click Event

When coding, I designated the path as follows: { path:'home', component: homeComponent; } In app.component.html: <button (click)="routerLink='/home'" An error occurred here Are you trying to navigate to the home page by ...

javascripttypescriptbuttonroutesclick

Is it feasible to incorporate a multi-level navigation menu into the "NavItem" component using MaterialUI with TypeScript?

Instructions for creating a multi-level navigation menu using MaterialUI and TypeScript: To the existing '/questions' section, it is desired to include the following 2 navigation menus: /questions/Tags /questions/Users This should resemble the ...

reactjstypescriptmaterial-uinext.jsreact-material-ui-form-validator

The function for utilizing useState with a callback is throwing an error stating "Type does not have

Currently, I am implementing the use of useState with a callback function: interface Props { label: string; key: string; } const [state, setState] = useState<Props[]>([]); setState((prev: Props[]) => [...pr ...

javascriptreactjstypescript

Changing Observable to Promise in Angular 2

Q) What is the best way to convert an observable into a promise for easy handling with .then(...)? The code snippet below showcases my current method that I am looking to transform into a promise: this._APIService.getAssetTypes().subscribe( assetty ...

typescriptangularpromiseobservable

Incorporating responsive design with React and Typescript

Trying to utilize React with TypeScript, I aim to dynamically generate components based on a field name // Storing all available components const components = { ComponentA, ComponentB, }; // Dynamically render the component based on fieldName const di ...

reactjstypescript

Effective Approach to Implement Validation in Dynamic Display Column

I have a <mat-select> element in my Angular 7 project with an ngFor loop that displays rows from a table. I need to implement validation for the "type" column, allowing only one key to be selected at a time and preventing users from selecting "key" m ...

angulartypescriptangular7