Next.js搭配Firebase实现动态路由无法获取文章数据报错如何解决？

你调用Firebase的getDoc()方法时传入了错误的参数类型：getDoc()要求接收的是Firestore文档引用对象（DocumentReference），但你直接传入了文档ID的字符串值ctx.query.id，SDK内部尝试在你传入的字符串上查找内部属性_delegate失败，因此抛出该类型错误。

你需要先调用Firebase提供的doc()方法构造对应文档的引用对象，再传入getDoc()执行查询，修正后的完整代码如下：

// 补全导入：新增doc方法，同时导入你自己初始化好的Firestore实例db
import { getDoc, doc } from "@firebase/firestore/lite";
import { db } from "你的firebase初始化文件路径"; // 替换为你实际导出db的文件路径

export const getServerSideProps = async (ctx: any) => {
  // 构造目标文档的引用，参数依次为：firestore实例、集合名、文档ID
  const docRef = doc(db, "posts", ctx.query.id as string);
  const docSnap = await getDoc(docRef);
  const data = docSnap.data();
  if (!data) return { notFound: true };
  return { props: { data } };
};

const Post = ({data}: any) => {
  if (!data) {
    return "Loading...";
  }

  return (
    <div>
      <p>Title: {data.title}</p>
    </div>
  );
}

export default Post;

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