Next.js 13 App目录下无法获取Firestore数据，显示社区不存在

你的代码核心问题在于Next.js App Router 与 Pages Router 的数据获取方式混淆，加上客户端组件的限制，导致始终无法正确获取 Firestore 数据，从而渲染“社区不存在”页面。以下是具体问题点和修复方案：

核心问题点 #

1. 错误使用数据获取方式：你用了 Pages Router 的 getServerSideProps 思路（写成了 GET 函数），但 App Router 不支持这种写法，页面的 GET 函数是 API 路由的专属写法，不会被页面组件调用。
2. 客户端组件限制：页面标记了 'use client'，属于客户端组件，无法在服务器端执行数据获取逻辑，导致 communityData 始终无值。
3. 参数获取错误：App Router 中动态路由参数需通过 params 获取，而非 context.query。
4. 空值判断逻辑问题：当文档不存在时返回空字符串 ""，!"" 为 true，会触发 NotFound 组件，但如果是数据获取失败或参数错误，也会误判。

修复方案（推荐服务器组件模式） #

App Router 中，服务器组件适合做数据获取，客户端组件负责交互逻辑。我们将页面拆分为服务器组件（负责数据获取）和客户端组件（负责交互）：

1. 服务器组件（页面入口） #

创建 app/communicate/[community]/page.tsx（确保动态路由文件名是 [community].tsx 或 [community]/page.tsx）：

import { doc, getDoc } from "firebase/firestore";
import { firestore } from "@/app/firebase/serverApp"; // 改用服务器端 Firebase 初始化
import { Community } from "@/app/communicate/atoms/communitiesAtom";
import CommunityNotFound from "@/app/communicate/components/Community/NotFound";
import CommunityClient from "./CommunityClient";

// 服务器端获取社区数据
async function fetchCommunity(communityId: string) {
  const docRef = doc(firestore, "communities", communityId);
  const docSnap = await getDoc(docRef);

  if (!docSnap.exists()) {
    return null;
  }

  return { id: docSnap.id, ...docSnap.data() } as Community;
}

// 服务器组件，直接获取动态路由参数
export default async function CommunityPage({ params }: { params: { community: string } }) {
  const communityData = await fetchCommunity(params.community);

  if (!communityData) {
    return <CommunityNotFound />;
  }

  // 将数据传递给客户端组件
  return <CommunityClient communityData={communityData} />;
}

2. 客户端组件（处理交互） #

创建 app/communicate/[community]/CommunityClient.tsx：

'use client'
import { useEffect } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { useRecoilState } from "recoil";
import { auth } from "@/app/firebase/clientApp";
import { communityState } from "@/app/communicate/atoms/communitiesAtom";
import Header from "@/app/communicate/components/Community/Header";
import CreatePostLink from "@/app/communicate/components/Community/CreatePostLink";
import Posts from "@/app/communicate/Post/Posts";
import About from "@/app/communicate/components/Community/About";

interface CommunityClientProps {
  communityData: Community;
}

export default function CommunityClient({ communityData }: CommunityClientProps) {
  const [user, loadingUser] = useAuthState(auth);
  const [communityStateValue, setCommunityStateValue] = useRecoilState(communityState);

  useEffect(() => {
    setCommunityStateValue(prev => ({
      ...prev,
      currentCommunity: communityData,
    }));
  }, [communityData, setCommunityStateValue]);

  return (
    <>
      <Header communityData={communityData} />
      {/* 左侧内容 */}
      <div>
        <CreatePostLink />
        <Posts
          communityData={communityData}
          userId={user?.uid}
          loadingUser={loadingUser}
        />
      </div>
      {/* 右侧内容 */}
      <div>
        <About communityData={communityData} />
      </div>
    </>
  );
}

额外注意事项 #

1. Firebase 初始化区分：服务器组件中建议使用 Firebase Admin SDK 或服务器端专用的初始化配置，避免客户端密钥暴露，同时提升数据获取效率。
2. 路由参数校验：可以在服务器组件中加入参数格式校验，避免无效参数导致的 Firestore 查询错误。
3. 文档ID匹配：确认 Firestore communities 集合中存在与 URL 参数完全一致的文档ID（注意大小写敏感）。

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