“类型错误：结果不可迭代”-> Nextjs 13 使用 getStaticParams 获取数据

Question

我正在使用 Next.js 13 的新提取方法从 supabase 数据库中提取数据。将我的用户提取到我的列表页面效果很好，即使我单击他们的卡片，URL 也会更改为预期的 slug。

但是，我似乎无法将数据提取到用户页面，这会导致以下错误：

TypeError: result is not iterable

我的列表页面如下所示：

export const revalidate = 60;

async function getData() {
  const {
    data
  } = await supabase.from("profiles").select().eq("is_host", true);
  return { data };
}

export default async function Hosts() {
  const data = await (getData());

  return ( 
<div > 
{data.data!.map((profile) => ( 
<div >
<Link href = {`/hosts/${profile.username}`}
          key = {profile.id} >
          </Link>
        ))
      } </div>

个人资料页面如下所示：

export const revalidate = 60;

export async function generateStaticParams() {
  const { data: profiles } = await supabase.from("profiles").select("username");

const hostPath = profiles?.map((profile) => ({
  params: {host: profile.username},
}))
return {
  hostPath,
  fallback: false,
}
}

export default async function HostPage({ params: { username } }: {params: {username: string}}) {
  const {data: profile} = await supabase.from('profiles').select().match({username}).single()

return (
<div>
      <pre>{JSON.stringify(profile, null, 2)}</pre>
</div>

两者都是服务器端呈现的。

有人有什么想法吗？ 先感谢您。

更新：在获取方法的返回语句中删除数据周围的 {} 后，一切都按预期工作（我将数组包装在 object 中，无法映射）。

Answer 1

is not iterable是指当您尝试迭代不可迭代的类型时。

这里

const { data: profiles } =  await supabase.from("profiles").select("username");

profiles不是数组。

你的意思是：

const hostPath = profiles?.data.map()