Next.js项目导入Header、Footer两个组件时Footer报错如何解决？

问题根因 #

getServerSideProps 是 Next.js 专属的页面级数据请求API，仅对放在pages目录下的页面组件生效，普通业务组件（比如你的Footer组件）中定义的getServerSideProps不会被框架执行，这就导致Footer组件接收的postTitle参数为undefined，调用map方法时直接触发报错。

修复步骤 #

1. 修改页面组件Index.js的getServerSideProps逻辑，同时请求Header和Footer需要的两份数据，统一通过页面props传递给子组件，修改后代码如下：

import React from 'react';
import Header from './header'
import Footer from './footer'
function Index({posts, postTitle}) {
  return (
    <>
        <Header posts={posts}/>
        <Footer postTitle={postTitle}/> 
    </>
  )
}

export async function getServerSideProps() {
  // 并行请求两个接口提升加载速度
  const [userRes, postRes] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users'),
    fetch('https://jsonplaceholder.typicode.com/posts')
  ])
  const posts = await userRes.json()
  const postTitle = await postRes.json()

  return {
    props: {
      posts,
      postTitle
    },
  }
}

export default Index;

2. 删除Footer.js中无用的getServerSideProps代码，修改后代码如下：

import React from 'react';
import FooterApi from './footerApi'
function Footer({postTitle}) {
  return (
    <>
        <FooterApi postTitle={postTitle}/>
    </>
  )
}

export default Footer;

3. （可选稳定性优化）给数组遍历逻辑添加空值判断，避免偶发的空值报错，以footerApi.js为例：

function FooterApi(props) {
  return (
    <div style={{background: '#f2e7d7',padding: '20px', border: '1px solid #eeca97',borderRadius: '10px'}}>
    <h1>Footer</h1>
    <p>
       {/* 加可选链运算符，postTitle为空时不会执行map触发报错 */}
       {props.postTitle?.map((post) =>(
         <>
          <span>{post.title}</span>
          </>
        ))}
    </p>
    </div>
  )
}

export default FooterApi

另外注意React内联样式要写成对象格式，Style属性名要改成小写的style，避免样式不生效的问题。

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