出现“无法读取未定义的属性（读取'map'）”错误。即使数组已声明并导入 [closed]

问：

我正在尝试映射数组并显示名称，以便最终可以动态路由到每个人的页面。尽管已声明数组，但该数组仍返回为未定义。所以这就是.map不起作用的原因。但是我哪里出了问题呢？

我有这个数组的代码 /lib/api

export async function getCastDetails() {
    const members = (
      {
        id: "1",
        name: "name one"
      },
      {
        id: "2",
        name: "name two"
      },
      {
        id: "3",
        name: "name three"
      }
    )
    return members;
  }

我有这段代码来映射数组并在页面上显示名称

import { getCastDetails } from "@/lib/api";

export async function getStaticProps() {
    const castData = await getCastDetails();
    return {
        props: {
            castData,
        }
    }
}
const CastCarousel = ({ castData }) => {

    console.log(castData);
    return (
        <div>
            {castData.map(member => (
                <div
                    key={member.id}
                >
                    <a>{member.name}</a>
                </div>
            ))}
        </div>
    )
}

export default CastCarousel

然后我显示在我的索引页上

编辑： 我相信我需要通过索引页上的组件传递 castData，但我无法弄清楚如何做到这一点。

这是我的索引页面的样子

import CastCarousel from "@/components/CastCarousel"

const Cast = () => {
    return (
        <main>
            <div className="flex flex-col justify-center items-center h-screen">
                <div>
                    <h1
                        className="text-6xl relative"
                    >Explore The Guys</h1>
                </div>
                <div className="">
                    <CastCarousel/>
                </div>
            </div>
        </main>
    )
}

export default Cast