Next.js中使用getServerSideProps调用Firebase获取匹配URL的Firestore文档失败的问题排查与解决方案咨询

你的代码出现问题的核心原因是使用了onSnapshot这个实时监听函数，而getServerSideProps需要的是一次性同步获取数据并返回结果。onSnapshot是异步回调模式，当getServerSideProps执行到return语句时，回调函数还没执行，所以article数组还是空的，自然会出现"can't read"的错误。

修正后的代码 #

我们需要改用getDocs方法来一次性获取查询结果，它支持async/await，能和getServerSideProps的异步特性兼容。另外注意你代码里的变量名拼写错误：slagUrl应该是slugUrl（和where条件里的slug对应，避免匹配不到数据）：

export async function getServerSideProps({ params }) { 
  let { slugUrl } = params; // 修正变量名拼写
  let article = null; // 直接用单个变量存储文章，不需要数组
  const articleRef = collection(db, "BlogArticles"); 
  const q = query(articleRef, where("slug", "==", slugUrl)); 
  const snapshot = await getDocs(q); // 用await获取一次性结果
  
  if (!snapshot.empty) {
    // 取第一个匹配的文档
    const doc = snapshot.docs[0];
    article = {
      id: doc.id,
      ...doc.data()
    };
    console.log('query', article);
  } else {
    // 没有匹配到文章的处理逻辑，比如返回null或者抛出错误
    console.log('No matching article found');
  }

  return { 
    props: { article }, 
  }; 
}

其他可行实现方式 #

1. 使用Firebase Admin SDK（推荐服务端场景） #

如果你的Next.js项目是在服务端运行（比如getServerSideProps），使用Firebase Admin SDK会更安全，因为它不需要客户端API密钥，直接通过服务端凭证访问Firestore。步骤大概是：

• 安装firebase-admin
• 在项目中初始化Admin SDK（比如在单独的firebase-admin.js文件）
• 在getServerSideProps中使用Admin SDK的Firestore方法查询数据

示例代码片段：

// 先初始化Admin SDK
import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert(/* 你的服务端凭证 */)
  });
}

const db = admin.firestore();

export async function getServerSideProps({ params }) {
  const { slugUrl } = params;
  const articleRef = db.collection("BlogArticles").where("slug", "==", slugUrl);
  const snapshot = await articleRef.get();
  
  let article = null;
  if (!snapshot.empty) {
    const doc = snapshot.docs[0];
    article = { id: doc.id, ...doc.data() };
  }

  return { props: { article } };
}

2. 使用getStaticProps + getStaticPaths（静态生成场景） #

如果你的博客文章是静态内容（不会频繁更新），可以用静态生成来提升性能。getStaticProps在构建时获取数据，getStaticPaths生成所有可能的文章路径：

export async function getStaticPaths() {
  // 获取所有文章的slug，生成路径
  const snapshot = await getDocs(collection(db, "BlogArticles"));
  const paths = snapshot.docs.map(doc => ({
    params: { slugUrl: doc.data().slug }
  }));

  return { paths, fallback: 'blocking' }; // fallback根据需求设置
}

export async function getStaticProps({ params }) {
  const { slugUrl } = params;
  const q = query(collection(db, "BlogArticles"), where("slug", "==", slugUrl));
  const snapshot = await getDocs(q);
  
  let article = null;
  if (!snapshot.empty) {
    const doc = snapshot.docs[0];
    article = { id: doc.id, ...doc.data() };
  }

  return { props: { article }, revalidate: 60 }; // revalidate设置增量静态再生
}

额外注意事项 #

• 确保Firebase初始化代码在服务端是正确的，避免重复初始化
• 处理没有匹配到文章的情况，避免前端出现空值错误
• 变量名要保持一致，比如你之前的slagUrl是拼写错误，会导致查询不到数据

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