Блог

Главная - Вопросы по программированию - Динамические маршруты nextjs и firebase

Динамические маршруты nextjs и firebase

# #firebase #google-cloud-firestore #next.js

Вопрос:

Я пытаюсь добавить динамические маршруты в NextJS и Firebase, до сих пор, когда я нажимаю на него, он перенаправляет пользователя на сообщение, которое они нажали. Я просто не могу получить название поста и другую информацию, которая является этим постом. Вот код, который я использую

 export const getServerSideProps: GetServerSideProps = async () => {
  const doc = await getDocs(collection(db, "posts"));
  const data = doc;
  if (!data) return { notFound: true };
  return { props: { data } };   
};

const post = ({ data }: any) => {
  if (!data) {
    return "Loading...";
  }
  return <div>{data.title}</div>;
};

Обновленный

 import { getDoc } from "@firebase/firestore/lite";


export const getServerSideProps = async (ctx: any) => {
  const doc = await getDoc(ctx.query.id)
  const data = doc.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;

Когда я попробовал этот метод, он выдает мне эту ошибку.

TypeError: Cannot use 'in' operator to search for '_delegate' in f2i3YJCJki36FqNdyseX

f2i3YJCJki36FqNdyseX является ли идентификатор документа

Комментарии:

1. Вы также можете показать базу данных firestore? Отфильтруйте конфиденциальную информацию.

2. Конечно, вот как структурирована база данных: ibb.co/qCt4Bn1

Ответ №1:

Это способ, которым я использовал, чтобы решить проблему и получить один пост

 import { getDoc, doc } from "@firebase/firestore";
import { GetServerSideProps } from "next";
import { db } from "../../lib/firebase/firebase";


export const getServerSideProps: GetServerSideProps = async (ctx: any) => {
  const docRef = doc(db, "posts", ctx.query.id);
  const docSnap = await getDoc(docRef);
  const data = docSnap.data()
  console.log(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;
Метки: