请教：将对象作为函数参数传入的实用性（附Next.js示例）

你看到的这个写法是ES6对象解构语法，核心是直接从传入的props对象里提取需要的属性，而非先接收整个对象再手动取值。它的实用性主要体现在这几点：

• 参数顺序完全不用纠结：如果组件需要多个属性，比如data、title、user，不管父组件传过来的props里属性顺序是什么样的，你解构时想怎么写顺序都可以，比如function Page({ title, data, user }) {}，完全不用像传统按顺序传参那样记位置，避免传错顺序导致的bug。

• 只拿你需要的，代码更简洁：如果父组件传过来的props有一堆属性（比如data、theme、layoutConfig），但你的组件只需要data，直接写{ data }就能拿到，不用再写const data = props.data这种冗余代码。

• 默认值设置超方便：如果某个属性可能没被传入，直接在解构里加默认值就能避免undefined报错，比如：

  function Page({ data = [] }) {
    // 就算没传data，这里也会用空数组，不会报错
  }
  

• 后续扩展不折腾：哪天你的组件需要加新属性，比如title，直接改成function Page({ data, title }) {}就行，只要调用组件的地方传了title，不用改任何传参逻辑，完全不影响现有代码。

Next.js实际场景举例 #

在Next.js中，getServerSideProps/getStaticProps会返回包含多个属性的props对象，用解构能让组件代码更清爽：

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/posts').then(res => res.json())
  const user = await fetch('https://api.example.com/current-user').then(res => res.json())
  return { props: { data, user, siteTitle: "我的博客" } }
}

// 只解构需要的data和user，siteTitle暂时不用就不用写
function Page({ data, user }) {
  return (
    <div>
      <h2>{user.nickname}的文章</h2>
      <ul>
        {data.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  )
}

export default Page

如果不用解构，你就得这么写：

function Page(props) {
  const data = props.data
  const user = props.user
  // ...后续代码
}

对比一下，解构写法的简洁性一目了然。

内容的提问来源于stack exchange，提问作者André Silveira