Next.js + TypeScriptで連想配列をmapで出力する

Question

環境

  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@types/node": "17.0.31",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    "classnames": "^2.3.1",
    "typescript": "^4.6.4",
...省略
}

実現したいこと

getStaticProps()を使って連想配列を出力したいと考えています。
しかし、List.map(() => {の部分で
TypeError: Cannot read properties of undefined (reading 'map')
となってしまいます。
const CardList = ({ List }) => { のところで implicitly has an 'any' type となっているため、ここが原因なのは分かるのですがそれ以上のことが自分ではわからないため、ご教授いただければと思います。

ソースコード

export const List: { [key: string]: string }[] = [
  { "title": "hoge", "image": "hogehoge.jpg", "description": "hogehoge", },
  { "title": "piyo", "image": "piyo.jpg", "description": "piyopiyo", },
  { "title": "dummy", "image": "dummy.jpg", "description": "dummydummy", },
];

import React from 'react'
import List from '@/common/types/List'
import Card from '@/components/molecules/Card'
import { List } from '@/path-to/List'

type Props = {
  list: List[]
};

const CardList: React.FC<Props> = ({ list }) => {
  return (
    <ul>
    {
      list.map((item) => {
        <Card
        title = { item.title }
        media = { item.image }
        description = { item.description }
          />
    })
    }
    < /ul>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  return { props: { list } };
}

export default CardList

type ListType = {
  title: string;
  image: string;
  description: string;
}

export default ListType

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'map')

参考にした記事

[Next.js]mapを使って連想配列を出力してみる
getStaticProps
blog-starter-typescript

Answer 1

CardListコンポーネントに明示的に型指定をすると良いと思います。

type Props = {
  List: { [key: string]: string }[]
}

const CardList: React.FC<Props> = ({ List }) => {
    ...
}

また、

List.map((item) => {
    <Card
        title = { item.title }
        media = { item.image }
        description = { item.description }
    />
})

は、mapに与えている関数が正しく戻り値を返却していないようなので、

List.map((item) => (
    <Card
        title = { item.title }
        media = { item.image }
        description = { item.description }
    />
))

にすると良いと思います。

ちなみに、今回のコードだと、Listはimportで読み込んでいるので、getStaticPropsを使わずに、そのままListをCardListコンポーネントで利用することも可能だと思います。

import React from 'react'
import Card from '@/components/molecules/Card'
import { List } from '@/path-to/List'

const CardList: React.FC = () => {
  return (
    <ul>
    {
      List.map((item) => {
        <Card
        title = { item.title }
        media = { item.image }
        description = { item.description }
          />
    })
    }
    < /ul>
  )
}

export default CardList

Comments

[sykdesunen]

ご回答ありがとうございます！
後者のgetStaticPropsを使わない方法で無事出力することができました。
/types/work.tsでtype Workを作り、/CardList/index.tsxでimportして
type Props = {
works: Work[]
};
としてみたのですが(blog-starter-typescriptのような感じ)、TypeError: Cannot read properties of undefined (reading 'map')でうまくいきませんでした。
使えるようになりたいので頑張ってみますが、今回はgetStaticPropsを使わずに利用することにしてみます。

[sykdesunen]

ソースコードを更新しましたので、もしよければご覧いただけますと幸いです。

[ukyoda]

> TypeError: Cannot read properties of undefined (reading 'map')でうまくいきませんでした。
↑のコードを見る感じだと、型が一致していないことが問題な気がします。多分ケアレスミスかと。

type Props = {
works: Work[]
};

とプロパティを定義したのであれば、CardListコンポーネントのプロパティはListではなくworksになるので、CardListコンポーネントは

const CardList: React.FC<Props> = ({ works }) => {
...
}

とするべきだと思います。

[sykdesunen]

失礼しました。
文字を入れ替えて投稿していたものをそのままコメントしてしまっていました。

{ works }では(parameter) works: Work[]が、workでは(parameter) work: Workが確認できます。

・ListTypeをListに
・type Props = {
works: Work[]
};
を
type Props = {
works: { [key: string]: string }[]
};
にしてみましたが、変わりはありませんでした。
この場合は下記の部分が間違っているのでしょうか。

type ListType = {
title: string;
image: string;
description: string;
}

export default ListType

mapのmethodは下記のようになっているので、{title: string;image: string;description: string;}[]にした方が良いでしょうか。
(method) Array<Work>.map<JSX.Element>(callbackfn: (value: Work, index: number, array: Work[]) => JSX.Element, thisArg?: any): JSX.Element[]

何度も質問してしまいすみません…

[sykdesunen]

index.tsxで
type Props = {
List: ListType[]
};

const Works = ({ List }: Props) => {
…中略
export const getStaticProps: GetStaticProps = async () => {
return { props: { List } };
}
とし、
CardListで
type Props = {
item: Item[]
};
とすることで解決しました！
next.jsのexampleにあるblog-starter-typescriptのcomponents/MoreStoriesを見直してみることで足りないところが判明しました。

丁寧に質問に回答していただき、ありがとうございました！