getStaticPropsとgetStaticPathsを使った動的ルーティングを実装したいです。

Question

想定している処理の流れ

Next.jsでgetStaticPropsとgetStaticPathsを使って
firebaseからデータのidを取得し、
そのidをpathにして動的ルーティングを実装したいです。

pages配下の[id].tsxというファイル内で
getStaticPathsでfirebaseのデータのidを取得し、
それをparamsに入れて動的にページを生成しようとしています。

getStaticPaths関数の中で、console.log(paths)を実行して
pathsが取得できているかを確認してみるとターミナル上で以下が表示されました。

[
{ params: { id: ‘20fkyQOE2D9Tc2RVPbwz’ } },
{ params: { id: ‘Ec6Ioq8C8V7DjImLXNgk’ } },
{ params: { id: ‘UF14bGDDylhGQkASQX7K’ } },
{ params: { id: ‘h8D7JBAFHcRgaZMZ2SR5’ } }
]

firebaseからデータのidを取得すること自体はできているのかなと思っているのですが、
取得したidをURLにして叩いてみても404ページが表示される状況です。

[id].tsxのディレクトリ

/pages/[id].tesx

[id].tsxの記述内容

import head from "next/head";
import React from "react";
import firebase from "firebase";
import { db } from "../firebase";
import { GetStaticPaths, GetStaticProps} from "next";
import Link from "next/link";

export const getStaticPaths = async () => {
  const tasksSnapshot = await db.collection('tasks').get().then((snapshot) => {
    const paths = snapshot.docs.map(doc => {
      return {
        params: { id: doc.id.toString() },
      };
    });
    console.log(paths)
  return { paths,fallback: false };
})};
  
  export const getStaticProps= async () => {
    const tasks = [];
    const ref = await db.collection('tasks').get();
    ref.docs.map((doc) => {
      const data = { id: doc.id, title: doc.data().title };
      tasks.push(data);
    });
    return {
      props: {
        tasks,
      }
    }
  }

  const Details = ({ tasks }) => {
    return (
      <>
        <h1>Firebaseのページ</h1>
        <ul>
          {tasks.map((task) => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
        <Link href={`/`}>
          <a>戻る</a>
        </Link>
      </>
    );
  }

問題点/エラー内容/エラー文章

Error: Invalid value returned from getStaticPaths in /[id]. Received undefined Expected: { paths: [], fallback: boolean }See here for more info: https://nextjs.org/docs/messages/invalid-getstaticpaths-value

firebaseに存在するデータのidをURLにしてアクセスすると、404ページが表示される状態になっています。

エラー原因となり得る部分

「Received undefined Expected」というエラー文から
undefinedの要素があるのか考えているのですが、
まだ何が間違っているのかの判断がついていません。

試したことや調べたこと

以下のページを参照してみたのですが、何が間違えているのか理解ができませんでした。
https://nextjs.org/docs/messages/invalid-getstaticpaths-value

おわかりになる方がいらっしゃったら、教えていただけますと幸いです。
なにとぞよろしくお願いいたします。