为何Next.js组件无需homes.homes即可访问props中的homes数组？

这是因为 Next.js 的 getServerSideProps 函数的返回规则决定的——你在 getServerSideProps 里返回的 props 对象，会被直接作为组件的入参 props 传递，不会额外嵌套一层。

举个实际代码例子就能明白：
假设你的 getServerSideProps 是这么写的：

export async function getServerSideProps() {
  const homes = [/* 你的数组数据 */];
  // 返回的props对象里，homes就是数组本身
  return { props: { homes } };
}

这时候，Next.js 会把这个 { homes: 数组 } 直接传给 Home 组件，所以组件接收的 props 就是这个对象。当你用 { homes = [] } 解构时，相当于从 props 对象里直接取出了 homes 属性（也就是那个数组），自然直接用 homes 就能访问数组，不需要再写 homes.homes。

如果出现需要 homes.homes 的情况，那一定是你在 getServerSideProps 里错误地把数组嵌套了一层，比如写成了：

return { props: { homes: { homes: 数组 } } };

这种情况下，组件解构出来的 homes 是一个包含 homes 属性的对象，这时候才需要 homes.homes 去访问数组。

总结来说：Next.js 会把 getServerSideProps 返回的 props 对象原封不动传给组件，所以解构时的层级完全取决于你返回的 props 结构。

内容的提问来源于stack exchange，提问作者Keith