Next.js中posts.map报错求助：确认是数组仍触发错误

报错信息 #

98 | 
   99 | <section>
> 100 | {posts.map((post) =>(
      |     ^
  101 | <BlogCard title={post.title} 
  102 | author={post.author} 
  103 | coverPhoto={post.coverPhoto}

页面代码 #

import Head from 'next/head'
import Navi from '/components/nav.js'
import Header from '/components/header.js'
import Link from 'next/link'
import { GraphQLClient, gql } from 'graphql-request';
import BlogCard from '/components/BlogCard'

const graphcms = new GraphQLClient(
  "SomeAPI"
);
const QUERY = gql`
 {
  posts {
    id
    title
    datepublish
    slug
    content{
      html
    }
    author{
      ime
      avatar{
        url
      }
    }
    coverPhoto{
      url
    }
    }
  }
`;
export async function getStaticProps(){
  const {posts} =  await graphcms.request(QUERY); 
  return{
    props:{
    posts,
  },
  revalidate:10,
};
}
export default function Home(posts) {

  return (
    <div >
      <Head>
        <title>Osnovna Skola Vuk Karadzic</title>
        <meta name="description" content="Web sajt OS Vuk Karadzic Rocevic" />
        <link rel="icon" href="/Logo,_Os_Vuk_Karadzic_Rocevic.png" />
      </Head>

      <main >
    <section>
      <Header />
    </section>


<section>
  <nav>
    <Navi />
    </nav>
    <div>
    <img className='relative  -z-10  ' src="naslovnaslika.jpg" alt="slika skolske torbe na stolu" />
  </div>
  
       
 <div className='  text-lg sm:text-2xl sm:opacity-80 cursor-pointer  text sm:flex sm:justify-evenly grid place-items-center'>
 <Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
  <div className=' text-white  circle relative sm:-top-32 mt-5 sm:w-96 sm:h-96 w-64 h-64 rounded-full grid place-items-center'>
  <img className=' opacity-80 sm:h-72  h-48   ' src='/student-cap-svgrepo-com.svg' alt='next' />
  <h1 className='mb-10 opacity-70 '>e-Dnevnik za ucenike</h1>
  </div>
  </Link>

  <Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
  <div className=' text-white circle relative sm:-top-32 w-64 max-xl:mt-5 h-64 sm:w-96 sm:h-96 rounded-full grid place-items-center'>
    <img className=' opacity-70 sm:h-72  h-48   ' src="family-silhouette-svgrepo-com.svg" alt="" />
    <h1 className='mb-10 opacity-70 '>e-Dnevnik za ucenike</h1>
  </div>
  </Link>

  <Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
  <div  className='text-white circle relative sm:-top-32 w-64 max-xl:mt-5 h-64 sm:w-96 sm:h-96 rounded-full grid place-items-center'>
    <img className=' opacity-70 sm:h-72  h-48   '  src="business-person-silhouette-wearing-tie-svgrepo-com.svg" alt="" />
    <h1 href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" className='mb-20 opacity-70 '>e-Dnevnik za ucenike
    </h1>
    
    
  </div>
  </Link>
 </div>
</section>

<section>
{posts.map((post) =>(
  <BlogCard title={post.title} 
  author={post.author} 
  coverPhoto={post.coverPhoto}
   key={post.id} 
  datepublish={post.datepublish} 
  slug={post.slug}/>
))}
</section>
      </main>
     
    </div>
  )
}

BlogCard组件代码 #

import Link from 'next/link'
import styles from '/styles/BlogCard.module.css'

export default function BlogPost({title, author, coverPhoto, datepublish,slug}){
    return(
<div className={styles.card} >
<Link href={'/posts/' + slug}>
<div className={styles.imgContainer}>
    <img src="{coverPhoto.url" alt="" />
</div>
</Link>
</div>
    )
}

问题排查与修复 #

1. 页面组件接收props错误 #

Next.js页面组件的参数是包含所有props的对象，你直接写export default function Home(posts)，此时posts是整个props对象而非数组，调用posts.map自然会报错。

修复：
解构props获取posts数组：

export default function Home({ posts }) {
  // ... 原有代码
}

2. BlogCard组件图片src语法错误 #

组件中<img src="{coverPhoto.url" alt="" />存在两处错误：

• 多余的双引号包裹，JSX表达式不需要外层双引号
• 缺少闭合的}

修复：

<img src={coverPhoto.url} alt={title || 'Blog cover'} />

3. 额外优化（可选） #

为了避免posts为undefined时触发报错，可以添加可选链操作符：

<section>
  {posts?.map((post) =>(
    <BlogCard 
      title={post.title} 
      author={post.author} 
      coverPhoto={post.coverPhoto}
      key={post.id} 
      datepublish={post.datepublish} 
      slug={post.slug}
    />
  ))}
</section>

另外，BlogCard组件的函数名是BlogPost，但导入时用的是BlogCard，建议保持组件名与导入名称一致，避免混淆：

export default function BlogCard({title, author, coverPhoto, datepublish,slug}){
  // ... 原有代码
}

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