Next.jsでfirestoreのデータからgetStaticPathsが作られない

Question

前提

現在下記の動画を参考にして、
firestoreのデータからダイナミックルーティングのページを生成しようとしています。
下記の動画の構造を真似して、firestore版に変えています。

参考動画
https://www.youtube.com/watch?v=mAHqpdVzJmA

実現したいこと

https://firestore.googleapis.com/v1/projects/next-auth-app-2aa40/databases/(default)/documents/posts
のfirestoreのデータからidを取得して、ダイナミックルーティングのページを生成（posts/[id].tsx）をしたい

発生している問題・エラーメッセージ

ですが、現状だとyarn build時にエラーが出てしまいます。

> Build error occurred
TypeError: data.map is not a function
    at getStaticPaths (/Users/abeshmupeii/manga-kousatu.net/.next/server/pages/posts/[id].js:23:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async buildStaticPaths (/Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:491:31)
    at async /Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:632:119
    at async Span.traceAsyncFn (/Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/trace/trace.js:79:20) {
  type: 'TypeError'
}

  const paths = data.map((post) => {
    return {
      params: { id: post.id.toString() },
    };
  });

にidがうまく入らないのが原因だと考えています。
全体のデータ自体は取得できる状態です。
対処法があれば教えて頂きたいです。

よろしくお願いします。

javaScript

export const getStaticPaths = async () => {
  const res = await fetch(
    "https://firestore.googleapis.com/v1/projects/next-auth-app-2aa40/databases/(default)/documents/posts"
  );
  const data = await res.json();

  const paths = data.map((post) => {
    return {
      params: { id: post.id.toString() },
    };
  });

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;
  const res = await fetch(
    "https://firestore.googleapis.com/v1/projects/next-auth-app-2aa40/databases/(default)/documents/posts" +
      id
  );
  const data = await res.json();

  return {
    props: {
      post: data,
    },
  };
};

const Daitails = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
    </div>
  );
};

export default Daitails;

試したこと

12月31日

補足情報（FW/ツールのバージョンなど）

ソースコード

https://github.com/takoyan33/manga-kousatu.net

Comments

[uky]

これデータの型って配列になっていますでしょうか？

> TypeError: data.map is not a function

とあるので、一見するとdataの型が配列ではなくstringになっているような気がします。

[uky]

mapメソッドは配列の時に使用できる関数ですので、dataが配列でなければこのようなエラーが出ることになります

[takoyan]

回答ありがとうございます。
今確認したら確かにそうなっていました。

var array = Object.keys(data).map(function (key) {
return data[key];
});

を追加して、arrayを見たのですが、

2) [{…}, {…}]
0
:
createTime
:
"2022-12-29T10:49:01.941103Z"
fields
:
categori
:
{stringValue: 'ONE PIECE'}
context
:
{stringValue: 'なぜ黒ひげがコビーをさらったか軽く予想する\n\n経緯は、王下七武海制度の撤廃によりハンコックの拿捕のた…とから、何か提示して、それを飲み込んでいった可能性がある\n\nいずれにしてもすごく気になる展開である'}
contextimage
:
{stringValue: ''}
createtime
:
{stringValue: '2022/12/29 19:49:01'}
displayname
:
{nullValue: null}
downloadURL
:
{stringValue: 'https://firebasestorage.googleapis.com/v0/b/next-a…=media&token=e69edd61-89cd-477c-bebe-9216006ec651'}
email
:
{stringValue: '[e-mail]'}
id
:
{stringValue: '0qni813FvMyCEiEq7VIt'}
likes
:
{integerValue: '0'}
netabare
:
{stringValue: 'ネタバレ有'}
photoURL
:
{nullValue: null}
selected
:
{arrayValue: {…}}
timestamp
:
{timestampValue: '2022-12-29T10:49:01.850Z'}
title
:
{stringValue: '黒ひげがコビーは攫った理由'}
userid
:
{stringValue: 'IJAZEmvnDSMsxchBCP1r3lSxSjK2'}
[[Prototype]]
:
Object
name
:
"projects/next-auth-app-2aa40/databases/(default)/documents/posts/0qni813FvMyCEiEq7VIt"
updateTime
:
"2022-12-31T01:57:09.003408Z"
[[Prototype]]
:
のようなデータになったのですが、
ここから

const paths = data.map((post) => {
return {
params: { id: post.id.toString() },
};
});

の部分をうまくidに合うように変える感じでしょうか。

[uky]

> の部分をうまくidに合うように変える感じでしょうか。

jsonを正しくオブジェクトの配列として復元すれば、

```
const paths = data.map((post) => {
return {
params: { id: post.id.toString() },
};
});
```

このコードでpathsが取れるようになるはずです。

[uky]

dataがJSON型であるのであれば、JSON.parse(data)とすることで復元できると思います。

> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

[takoyan]

連絡ありがとうございます。

今試したことに画像追加したのですが、
json型でもエラーになってしまいました。
これがエラーになるのは、
取得したいidがfiledsの下の階層にある感じなのですが、それで上手く取得できずエラーになっている感じでしょうか。よろしくお願いします。
よろしくお願いします。

[uky]

ですね

post.id.toString()
としているところを、
post.fields.id.toString()

としてみてください！

[takoyan]

連絡ありがとうございます。
取得することができました。ありがとうございます。

Answer 1

ukyさんのコメントにて解決できました。

質問へのコメントによって解決につながったということで対応内容の記載です。

解消までの流れ

簡単に手順です

エラーより、型がおかしい

TypeError: data.map is not a function

発生しているエラーより、質問者の想定と違い、dataが配列ではないのでは？と疑う。
→ 確認してもらったところ配列ではなかった。

jsonを取り扱っているようだったので、変数dataを作成しているところを確認

const data = await res.json();

上記が想定であれば配列で返ってくる、とのことだったがなぜかstringで返ってきている模様。

json()は本来JSONで表現できるものならどのような値でも取りうるため、配列も返却されるはずだが、resで取れる内容は一見正しそうなため、今回はjson()で生成された文字列をJSON.parse(data)に突っ込んで配列を取得する方針での解消とした。

オブジェクトのプロパティへのアクセス

上記で本来のエラーは解消されたが、それでも取得したいidがとれないとのことで、質問に添付の画像からオブジェクトの構造を確認したところ、

以下のような構造ではなく、

{
  context: "サンプル",
  id: "サンプルID"
  ...
}

以下のようになっていた

{
  fields: {
    context: "サンプル",
    id: "サンプルID"
    ...
  }
}

そのため、もともとpost.id.toString()としていたところをpost.fields.id.toString()としてもらうことでバグを解消できた。

オブジェクトの操作で迷った時は以下参考にしてみてください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects

Answer 2

ukyさんのコメントにて解決できました。

Answer 3

公式と比べると記法がブレてませんか？ 以下ではいかがでしょう

  const paths = data.map((post) => ({
    params: { id: post.id.toString() }
  }));

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths