質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

220閲覧

ReactでgetStaticPathsのエラーが起きる

Shmupeiii

総合スコア105

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/12/30 09:00

前提

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

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

実現したいこと

firestoreのデータからダイナミックルーティングのページを生成(posts/[id].tsx)にて

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

イメージ説明
ですが、現状だとyarn build時にエラーが出てしまいます。
firestoreのデータ取得に問題がある感じでしょうか。
対処法があれば教えて頂きたいです。

よろしくお願いします。

> Build error occurred Error: Invalid `paths` value returned from getStaticPaths in /posts/[id]. `paths` must be an array of strings or objects of shape { params: [key: string]: string } at buildStaticPaths (/Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:509:15) 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: 'Error' }

javaScript

JavaScript

1import { useEffect, useState, useMemo } from "react"; 2import { database } from "../../firebaseConfig"; 3import { 4 collection, 5 query, 6 getDocs, 7 orderBy, 8 doc, 9 getDoc, 10} from "firebase/firestore"; 11 12export const getStaticPaths = async () => { 13 const databaseRef = collection(database, "posts"); 14 const querySnapshot = await getDocs(databaseRef); 15 const ret: any = []; 16 querySnapshot.forEach((doc) => { 17 ret.push(doc.data()); 18 }); 19 20 const paths = ret.forEach((post) => { 21 return { 22 params: { id: post.id }, 23 }; 24 }); 25 26 return { 27 paths, 28 fallback: false, 29 }; 30}; 31 32export const getStaticProps = async (context) => { 33 const id = context.params.id; 34 const fieldToEdit = doc(database, "posts", id); 35 const docSnap = await getDoc(fieldToEdit); 36 37 return { 38 props: { 39 post: docSnap, 40 }, 41 }; 42}; 43 44const Daitails = ({ post }) => { 45 return ( 46 <div> 47 <h1>{post.title}</h1> 48 <h1>{post.body}</h1> 49 </div> 50 ); 51}; 52 53export default Daitails; 54

試したこと

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

ソースコード

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2022/12/30 12:14

20行目の ret.forEach を ret.map に変えれば良いかも?
Shmupeiii

2022/12/30 14:18 編集

連絡ありがとうございます。 試してみたのですが、 > Build error occurred Error: A required parameter (id) was not provided as a string in getStaticPaths for /posts/[id] at /Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:550:27 at Array.forEach (<anonymous>) at /Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:543:29 at Array.forEach (<anonymous>) at buildStaticPaths (/Users/abeshmupeii/manga-kousatu.net/node_modules/next/dist/build/utils.js:511:17) 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: 'Error' } というエラーが出てしまいました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問