In Nextjs 13 (app router), how to use generateStaticParams with Firebase (Firestore) to generate dynamic pages?

Question

I have build a listing page that lists down all the firestore docs (coffeeplaces) from the firestore database, and when I click on one of them, I want to show an indiviual page with information about that specific place.

But I have some difficulties with the new app routing system of Nextjs 13, especially the generateStaticParams function.

I have followed these docs:

• generateStaticParams
• Data Fetching

The data fetching is working fine, and I use two different calls (async) to load in data in the order I want, as described in the docs. This works fine. But the part that isn't working, is the generateStaticParams function.

When I try to generate an ID needed for the params, it doesn't seem to work. It doesn't read my ID, even if I hardcode it into the generateStaticParams function.

This is my page to render a dynamic page folowing the structure /listing/[coffeeplace]/page.tsx :

import fetchCoffeePlace from "@/api/fetchCoffeeplace";
import { db } from "@/helpers/firebaseConfig";
import { collection, getDocs } from "firebase/firestore";
import { Suspense } from "react";

export default async function Page({ params }: { params: { id: string } }) {
  const { id } = params

  const CoffeeplaceData = fetchCoffeePlace(id);
  const CoffeeplaceInfoData = fetchCoffeePlace(id); // fetching using the same function for testing purpose

  const coffeeplace = await CoffeeplaceData;

  return (
    <div>
      <h1>{coffeeplace?.name}</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <CoffeeplaceInfo promise={CoffeeplaceInfoData} />
      </Suspense>
    </div>
  );
}

async function CoffeeplaceInfo({ promise, }: { promise: Promise<CoffeePlace>; }) {
  const coffeeplaceInfo = await promise;
  return <p>{coffeeplaceInfo?.place.city}</p>;
}

// How to get this to work?
export async function generateStaticParams() {

  const coffeePlaces = await getDocs(collection(db, "coffeePlaces"));

  return coffeePlaces.docs.map((doc) => ({
    id: doc.data().id,
    slug: doc.data().name
  }));
}

I've tried to return hardcoded data as in the docs like so, but without success:

export async function generateStaticParams() {

  return [
    { id: "9ZVOCYsngTksBKXqQQOH" }, // hardcoded ids to try to generate params
    { id: "r7CFv3t4Ni5sNl20wE8h" },
    { id: "xndJfefMIYGjZSjKfWsC" },
  ];
}

I get back that the ID is undefined. If I place the id with a id number as const in my component itself (instead of params), it works.

What I'm trying to achieve:

• Generate pages from dynamic data from firestore
• Use the name as slug (probably need something like slugify)
• Use the ID to fetch the correct content (ID is linked in the listing page)

Any suggestions?