如何在Next.js的React Server Components中无Prop Drilling且不使用Context传数据？

1. 组件组合 + 服务端异步获取（推荐方案） #

Server Components 支持直接在组件内部通过 async/await 获取数据，结合组件组合可以跳过中间层级，直接将数据传递给最终需要它的子组件，从根源避免Prop Drilling。

示例代码：

// 页面级 Server Component（无需标记"use client"）
async function Page() {
  // 直接在服务端请求API获取数据
  const apiData = await fetch('/api/target-data').then(res => res.json());

  // 直接将数据传递给深层嵌套的目标组件，中间组件无需接收和转发props
  return (
    <PageLayout>
      <MainSection>
        <DeepNestedDataConsumer data={apiData} />
      </MainSection>
    </PageLayout>
  );
}

// 深层嵌套的子组件（Server Component）
function DeepNestedDataConsumer({ data }) {
  return <div>{data.content}</div>;
}

2. 页面级服务端数据预取 #

如果数据是页面全局所需，可通过Next.js的页面级服务端数据获取能力拿到数据后，再通过组件组合传递给深层组件：

• App Router：直接在页面组件中用async/await获取（如方案1）
• Pages Router：使用getServerSideProps/generateStaticProps预取数据

示例（Pages Router）：

// 页面组件（Server Component）
export default function Page({ pageData }) {
  return (
    <Layout>
      <DeepNestedComponent>
        <DataDisplay data={pageData} />
      </DeepNestedComponent>
    </Layout>
  );
}

// 服务端预取数据
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/page-data');
  const pageData = await res.json();

  return { props: { pageData } };
}

3. 封装Server-only数据提供者组件 #

可以封装一个仅在服务端运行的提供者组件，通过children属性批量传递数据，本质是组件组合的延伸：

// Server-only 数据提供者组件
async function ServerDataProvider({ children }) {
  const globalData = await fetch('/api/global-data').then(res => res.json());
  
  // 为所有子元素注入数据props
  return React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { globalData });
    }
    return child;
  });
}

// 使用方式
async function Page() {
  return (
    <ServerDataProvider>
      <Layout>
        <DeepNestedChild /> {/* 该组件可直接获取globalData props */}
      </Layout>
    </ServerDataProvider>
  );
}

核心注意事项 #

• Server Components 严格禁止使用客户端API（如Context、useState、第三方客户端状态管理库），所有数据传递必须基于服务端合法逻辑：直接异步获取、组件组合。
• 不要试图在Server Components中强行适配客户端状态方案，这会违背Server Components的设计初衷。

内容的提问来源于stack exchange，提问作者Arkadiusz Kałkus