Next.js 13+ App Router中如何替代getServerSideProps获取query参数？

核心解决思路 #

在App Router体系下，服务器组件（默认所有组件都是服务器组件）可直接通过params（动态路由参数）或searchParams（URL查询参数）获取对应值，无需依赖旧版的getServerSideProps上下文。你需要把参数从页面组件传递给getData函数，而非在函数内部试图访问全局context。

具体代码修改 #

1. 页面组件（示例路径：app/communities/[communityId]/page.tsx）

如果是动态路由（如/communities/123），用params取参数；如果是URL查询参数（如/communities?communityId=123），用searchParams：

import { getData } from './utils'; // 假设getData放在utils文件中

export default async function CommunityPage({ params, searchParams }: {
  params: { communityId: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  // 根据实际场景选择参数来源
  const communityId = params.communityId || (searchParams.communityId as string);
  
  const { communityData } = await getData(communityId);

  return (
    <div>
      {/* 渲染社区数据 */}
      {communityData && <h1>{communityData.name}</h1>}
    </div>
  );
}

2. 修改后的getData函数

让函数接收communityId作为参数，移除对context的依赖：

import { doc, getDoc } from 'firebase/firestore';
import { firestore } from './firebase-config'; // 你的Firebase配置文件

export async function getData(communityId) {
  try {
    const communityDocRef = doc(firestore, "communities", communityId);
    const communityDoc = await getDoc(communityDocRef);

    return {
      communityData: communityDoc.exists()
        ? { id: communityDoc.id, ...communityDoc.data() }
        : ""
    };
  } catch (error) {
    console.log("getData error", error);
    throw error; // 抛出错误让Next.js自动处理错误页面
  }
}

关键说明 #

• App Router的服务器组件原生支持async/await，不需要getServerSideProps这类额外的数据获取函数。
• params对应动态路由定义的参数（比如路由段[communityId]），searchParams对应URL中?后的查询参数。
• 显式传递参数给getData函数，能让函数更独立、易测试，也符合App Router的设计逻辑。

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