Next.js Discord

Discord Forum

pararell route with dynamic props.

Unanswered
Turkish Van posted this in #help-forum
Open in Discord
Turkish VanOP
how do i get the id of a e.g user in a pararell route?
i was trying to do something like this:
'use client'

import { ModalParallel } from '@/components/modal-parallel'
import { EditarUsuarioForm } from '@/components/usuarios/editar'

export default function Page({ params }: { params: { id: string } }) {
  const id = params.id
  return (
    <ModalParallel size="lg">
      {({ setIsOpen }) => <EditarUsuarioForm setIsOpen={setIsOpen} cancelButton id={id} />}
    </ModalParallel>
  )
}


but im getting this error:
Console Error


A param property was accessed directly with `params.id`. `params` is now a Promise and should be unwrapped with `React.use()` before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap `params` with `React.use()`.

src/app/(app)/gestao/usuarios/@modal/[id]/editar/page.tsx (6:38) @ Page


  4 | import { EditarUsuarioForm } from '@/components/usuarios/editar'
  5 |
> 6 | export default function Page({ params }: { params: { id: string } }) {
    |                                      ^
  7 |   const id = params.id
  8 |   return (
  9 |     <ModalParallel size="lg">

4 Replies

Japanese pilchard
Make use of useParams which is imported from next/navigation
LuisLl
The problem is that params are now a promise, when you pass them down as props from a server component to a client component make sure you’re typing them correctly, and when accessing them make sure to unwrap the promise to get their value, this is done by awaiting params in server components or passing them to use hook in client components.

So, to solve this issue you can either use the hook useParams() or the hook use():
const {id} = useParams()
const {id} = use(params)
@CodigoK 401 export default async function YourFunction({ params }: { params: { id: string } }) { const resolvedParams = await params; const id = resolvedParams.id; console.log('Room ID:', id);
LuisLl
That will only work for Server Components, and it still needs the params to be types as a promise:
export default async function YourFunction({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = await params;
  const id = resolvedParams.id;
  console.log('Room ID:', id);
…