Next js Typescript 型定義をしたときに起きたエラー

Question

前提

TypeScriptで型定義を行いました。

その際に起こったエラーが解決できないのでご協力をお願いしたいです

行ったこと

型定義前

import Shop from '../types/shops'

export const ShopCard = (props: Shop) => {
  const { name, description, price, image, holidays, comments } = props

変更後

import Shop from '../types/shops'

type Props = {
  shop: Shop
}

const ShopCard: React.FC<Props> = ({ shop }) => {
  const { name, description, price, image, holidays, comments } = shop

変更前にエラーはありませんでした

発生している問題・エラーメッセージ

TypeError: Cannot destructure property 'name' of 'shop' as it is undefined.

該当のソースコード

/types/shops.tsはこのように書いています

type Shop = {
  name: string
  description: string
  price: string
  holidays: ShopHoliday[]
  image: string
  comments: Comment[]
}

export type ShopHoliday = {
  wday: string
}

export type Comment = {
  content: string
  nickname: string
  createdAt: string
}

export default Shop

ぜひご教授お願い致します。

追記

import { ShopCard } from '../components'
import { mockData } from 'mockData/ShopData'

const Home: NextPage = () => {
  return (
    <div>
      <div className="gap-4 mx-auto px-6 py-3 w-fit max-w-[1200px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        {mockData.map((item, index) => (
          <div key={index} className="border rounded-2xl border-gray-200 bg-white overflow-hidden max-w-[400px]">
            <Link href="/">
              <ShopCard
                name={item.name}
                description={item.description}
                price={item.price}
                image={item.image}
                holidays={item.holidays}
                comments={item.comments}
              />
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Home

Comments

[uky]

`ShopCard.tsx`を利用しているコンポーネント側で`shop`は渡せていますでしょうか？

[kuralie]

index.tsxを記載しました。
おそらく渡せていないのですが、この場合はどのように渡せばいいのか自分ではわからず...ぜひご教授お願い致します

[uky]

回答書いてしまったので、回答追記します！
しばしお待ちください！

[kuralie]

お優しい,,,ありがとうございます

[uky]

回答追記しました！
何かわからないことあれば回答にコメントください！

[uky]

ちなみにこれはどうでもいい話なのですが、
Next.jsではなくReactに関する質問なので、Reactのタグも追加することを推奨します。

[kuralie]

ありがとうございます！

Answer 1

変更前のShopCardのprops

props: {
  name: string
  description: string
  price: string
  holidays: ShopHoliday[]
  image: string
  comments: Comment[]
}

変更後のShopCardのprops

props: {
  shop: {
    name: string
    description: string
    price: string
    holidays: ShopHoliday[]
    image: string
    comments: Comment[]
  }
}

と、構造が変っているため、
ShopCardを利用するコンポーネント側で渡す値を修正する必要があります。

---

追記

ShopCardのpropsの型変更に伴って、
それぞれの値（nameやdescriptionなど） を一つずつ入れるのではなくshop というオブジェクトを渡す必要があります。

変更前

~~ 省略 ~~
<ShopCard
  name={item.name}
  description={item.description}
  price={item.price}
  image={item.image}
  holidays={item.holidays}
  comments={item.comments}
/>
~~ 省略 ~~

変更後

~~ 省略 ~~
<ShopCard
  shop={item}
/>
~~ 省略 ~~

Comments

[kuralie]

なるほど、、これだけで渡せるようになるのですね。。。勉強不足でした。ありがとうございます！これからもがんばります

[uky]

💪