Next.js组件与页面数据传递及API调用问题咨询

先搞定「split undefined」的报错 #

这个问题就是query.paths偶尔没传或者为空，直接调用split当然会炸。给你个简单的处理方式：

// 在getServerSideProps里
const paths = context.query?.paths || '';
// 用filter(Boolean)去掉分割后可能出现的空字符串
const [param1, param2, param3] = paths.split('/').filter(Boolean);

这样就算paths没传，也不会触发undefined错误，还能过滤掉无效的空参数。

用useEffect调用api3完全可行 #

当然可以用useEffect在客户端请求api3来更新component1的数据，不用新建页面，直接复用现有index的结构就行，注意几个细节：

• 初始渲染时component1先用服务端传的gotDataApi2，等请求完api3再替换，记得加个加载状态，别让用户看到数据跳来跳去。
• 要监听URL里的paths参数变化，每次参数变了都重新请求api3：

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

function IndexPage({ gotDataApi1, gotDataApi2 }) {
  const router = useRouter();
  const [componentData, setComponentData] = useState(gotDataApi2);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchApi3 = async () => {
      const { paths } = router.query;
      if (!paths) return; // 没参数就不请求
      setIsLoading(true);
      try {
        const res = await fetch(`/api/api3?paths=${paths}`);
        const gotDataApi3 = await res.json();
        setComponentData(gotDataApi3);
      } catch (err) {
        console.error('api3请求炸了:', err);
        // 出错了就 fallback 回原来的gotDataApi2
      } finally {
        setIsLoading(false);
      }
    };

    fetchApi3();
  }, [router.query.paths]);

  return (
    <div>
      {/* 你的侧边栏等公共结构 */}
      {isLoading && <div>加载中...</div>}
      <Component1 data1={gotDataApi1} data2={componentData} />
    </div>
  );
}

export async function getServerSideProps(context) {
  // 原来的api1、api2请求逻辑不动
  const gotDataApi1 = await fetch('/api/api1').then(res => res.json());
  const gotDataApi2 = await fetch('/api/api2').then(res => res.json());

  return { props: { gotDataApi1, gotDataApi2 } };
}

export default IndexPage;

这种方式适合参数变化频繁、不需要SEO的场景——毕竟客户端请求的数据搜索引擎抓不到。

兼顾SEO和代码复用的标准玩法 #

如果需要api3的数据能被搜索引擎抓取（也就是服务端渲染），又不想重复写侧边栏代码，推荐抽离公共布局组件，同时优化getServerSideProps的逻辑：

第一步：抽离公共布局 #

新建components/Layout.js，把侧边栏这些所有页面都要用的结构放进去：

// components/Layout.js
export default function Layout({ children }) {
  return (
    <div className="page-wrap">
      {/* 侧边栏代码直接搬过来 */}
      <aside className="sidebar">...</aside>
      {/* 页面内容区 */}
      <main className="content">{children}</main>
    </div>
  );
}

第二步：优化index页面的服务端逻辑 #

直接在index的getServerSideProps里判断有没有paths参数，有就请求api3，没有就请求api2，服务端直接返回最终要传给component1的数据：

function IndexPage({ gotDataApi1, componentData }) {
  return (
    <Layout>
      <Component1 data1={gotDataApi1} data2={componentData} />
    </Layout>
  );
}

export async function getServerSideProps(context) {
  const { paths } = context.query;
  
  // api1的请求逻辑不变
  const gotDataApi1 = await fetch('/api/api1').then(res => res.json());
  
  let componentData;
  if (paths) {
    // 有参数就请求api3，加个错误处理防止崩了
    try {
      componentData = await fetch(`/api/api3?paths=${paths}`).then(res => res.json());
    } catch (err) {
      console.error('api3请求失败:', err);
      // 出错了就用api2的数据兜底
      componentData = await fetch('/api/api2').then(res => res.json());
    }
  } else {
    // 没参数就用api2的数据
    componentData = await fetch('/api/api2').then(res => res.json());
  }

  return { props: { gotDataApi1, componentData } };
}

export default IndexPage;

这种方式既保留了服务端渲染的SEO优势，又完全复用了页面结构，还顺便解决了split的报错问题。

要是你还是想用动态路由[...slug].js，也可以让它复用同一个Layout组件，这样侧边栏代码不用重复写，直接在[...slug].js里套Layout就行。

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