Next.js项目传参报错：类型'{ articleList: articleCard[]; }'无法赋值给IntrinsicAttributes

问题场景 #

开发Next.js项目时，通过getStaticProps获取数据传递给主组件Blog，再将数据传递给子组件ArticleList时出现类型不匹配错误。

相关代码 #

数据获取代码 #

export async function getStaticProps() {
  let articlesArray: articleCard[] = []
  const data = await getArticlesList().then((response) => {
    return response
  })
  if (data) {
    articlesArray.push(...data)
  }
  return {
    props: {
      articlesArray
    }
  }
}

主组件Blog代码 #

export default function Blog(props: { articlesArray: articleCard[] }) {
  const articlesList = props.articlesArray
  return (
    <div className='container'>
      <ArticleList articleList={articlesList} />
    </div>
  )
}

子组件ArticleList代码 #

function ArticleList({articleList}: articleCard[]) {
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [articlesPerPage] = useState<number>(6)

return (
       <h1> rest of the code </h1>
       )
}

类型定义 #

export interface fields {
  title: string
  slug: string
  content: [Object]
  excerpt: string
  coverImage: [Object]
  date: string
  author: [Object]
  categories: []
}
export interface articleCard extends fields {
  id: string
}

报错信息 #

• 在ArticleList组件处：Property 'articleList' does not exist on type 'articleCard[]'
• 在Blog组件的ArticleList调用处：Type '{ articleList: articleCard[]; }' is not assignable to type 'IntrinsicAttributes & articleCard[]'. Property 'articleList' does not exist on type 'IntrinsicAttributes & articleCard[]'

解决方案 #

错误核心是子组件ArticleList的props类型定义错误：你将组件接收的props直接定义为articleCard[]数组类型，但实际上组件接收的是一个包含articleList属性的对象，而非数组本身。

修改方式一：创建独立的props接口 #

// 定义ArticleList专属的props类型
interface ArticleListProps {
  articleList: articleCard[]
}

function ArticleList({articleList}: ArticleListProps) {
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [articlesPerPage] = useState<number>(6)

  return (
       <h1> rest of the code </h1>
  )
}

修改方式二：直接在参数中声明对象类型 #

function ArticleList({articleList}: { articleList: articleCard[] }) {
  // 组件逻辑保持不变
}

修改后，组件接收的props结构会和父组件传递的{ articleList: articlesList }完全匹配，类型错误即可消除。

额外优化建议 #

• 类型定义中content: [Object]、coverImage: [Object]这类写法表示长度固定为1的数组，如果实际业务中是任意长度的数组，应改为content: Object[]（建议替换成具体类型而非Object，提升类型安全性）
• getStaticProps中的await getArticlesList().then(...)可简化为const data = await getArticlesList()，避免冗余的Promise链式调用

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