前提
現在下記の動画を参考にして、
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/ツールのバージョンなど)
ソースコード
20行目の ret.forEach を ret.map に変えれば良いかも?
連絡ありがとうございます。
試してみたのですが、
> 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'
}
というエラーが出てしまいました
あなたの回答
tips
プレビュー