こんなときどうする

オブジェクトにコンポーネントを入れて、page.tsxで出力する。

例えば、アイコンSVGとラベルをセットにしてオブジェクトを生成したとする。

import { SVGProps } from "react";

export type IconSvgProps = SVGProps<SVGSVGElement> & {
  size?: number;
};

// ↓ コレ
export type NavItemType = {
  label: string
  href: string
  isLogin: boolean,
  iconSvg: React.FC<IconSvgProps>
}

これを格納したオブジェクト配列をmapで回して、SVGを出力したい。

return(
  {Items.map((item, index) => {
    // ここで一旦SVGを取り出す。
    const IconSvg = item.iconSvg;
    return (
      <Link
          href={item.href}
          size="lg"
        >
          <IconSvg />
          {item.label}
        </Link>
      )
  })}
)

エラー発生事例

Warning: A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

Worning

"use client"が宣言されているのに、コンポーネントがasyncで呼ばれている。

Success

コンポーネントのasyncを削除すれば解消。