[FIXED] How to fix "Type '{ key: number; }' is missing the following properties" when sending props with spread operator in Next.js App directory?


I’m trying to upgrade a Next.js v.13 /pages directory project to a /app directory. Both projects are using the latest packages and doing exactly what I did in the other project, but for some reason when I send the props in the map loop of /app directory project.

I am using a type generated using the Supabase CLI.


// products table row type
        line: {
          Category ID: Number | Null
          Description: String | Null
          Featured In: Number | Null
          identification number
          Name: String | Null
          Preview: String | Null
          Price: Number | Null
          sales: boolean | null
          sale_price: number | null
          Sales Text: String | Null
          Stock: Count | Null

// no errors on this page
export default function OverviewCard(props: Product): JSX.Element {}


 'Use client'

  Export default function OverviewProducts(): JSX.Element {
    // products fetched using @tanstack/react-query

    return (
{product && ( <> {product .map((product, i) => ( // ☝️ error occurs here ))} )}

I got this error not seen in other projects. I did the exact same thing, even though I was using the /app directory.

‘{key:number;}’ does not have the following properties from the type
‘{ Category ID: Number | Null; Description: String | Null;
Featured In: Number | Null; ID Number; Name: String | Null; Preview:
String | Null; Price: Number | Null; Sales: Boolean | Null; Sales Price:
Number | Null; Sales Text: String | Null; Inventory: Number | Null;
category_id, description, featured_in, id and 7 others.

You can also click the hover helper button Quick Fix... (Ctrl+.) in VSCode to find all “missing attributes” that are all values ​​of Product type.

What am I doing wrong in my code, or did I miss something about the new /app directory?


From your comment we can see that the products value is an array of objects with fields that you need. However, since the error you have is from typescript, typescript doesn't know about what is the type of the data that you just fetched. If you hover over products in VSCode it will likely say any. To fix your issue you can either provide type for it or type cast it in the part of the code that you omitted from your question in

// products fetched using @tanstack/react-query

Answered By - Anton Kastritskiy

Answer Checked By - Candace Johnson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published