XML Sitemaps with NextJS and Ghost

I spent a few hours the other day trying to create a dynamic sitemap in NextJS using the Ghost Content API, and was running into issues - because TypeScript. The code rendered to the file fine, but my editor - Nova (if you're asking) was giving me an error, and CI wasn't playing ball either

The initial code looked like the snippet below.

const posts = await getPosts();

  return posts.map((post : PostOrPage) => ({
    url: `${BASEURL}/blog/${post.slug}/`,
    lastModified: `${post.updated_at}`,
    changeFrequency: "daily",
    priority: 0.8,
  }));

A map through an array of objects, which I used in the page to render all the blog posts and worked perfectly. The error I was getting was; Property 'map' does not exist on type 'void | PostsOrPages'. After a several hours of swearing, I worked out a fix.

The solution was to cast getPosts as PostOrPage[] and then map through it. The full TypeScript component below is taken from my current project. I'm leaving it here so I don't forget what I did, and it's good to share because the web is open and we should share things. Hopefully someone will find this useful.

import { BASEURL } from "@/data/common";
import { getPosts } from "@/utils/ghost";
import { PostOrPage } from "@tryghost/content-api";
import type { MetadataRoute } from "next";

export const revalidate = 3600; 

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = (await getPosts()) as PostOrPage[];

  return posts.map((post) => ({
    url: `${BASEURL}/blog/${post.slug}/`,
    lastModified: `${post.updated_at}`,
    changeFrequency: "daily",
    priority: 0.8,
  }));
}