#TypeError: Cannot destructure property 'params' of 'param' as it is undefined.

4 messages · Page 1 of 1 (latest)

whole olive
#

I get this when trying to destructure and pass on a property using the app page router.
It works sometimes, but changing between the param paths will give me this error in this file:

/src/app/[floor]/page.tsx

'use client'
import useSWR from 'swr'
import SearchInput from '@/components/Search/SearchInput'
import FloorPlan from '@/components/FloorPlan/FloorPlan'
interface Props {
    params: { floor: string }
}

const fetcher = (url: URL) => fetch(url).then(res => res.json())

const Home = async ({ params: { floor } }: Props) => {
    const { data, error } = useSWR('/api/staticdata', fetcher)

    // Handle the error state
    if (error) return <div>Failed to load</div>

    // Handle the loading state
    if (!data) return <div>Loading...</div>

    return(
      <main>
            <SearchInput data={data} />
            <FloorPlan floor={floor} />
      </main>
    )
}

export default Home
robust cometBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
old loom
#

A client component cannot be async

#

Not sure if it's related to your issue, but it's definitely wrong and can cause errors