//tips
//smart contract
getStaticProps周りとの連動がうまくいっていないので、firebaseと連動している例がないかを検索。
https://stackoverflow.com/questions/66064397/how-to-correctly-use-getstaticprops-for-firebase
https://qiita.com/centerfield77/items/49b029d4d1618dfeedb6
Pushで配列に格納したものをpropsで受け渡す仕組みで問題なさそう。
posts.push({
pid: doc.data().pid,
title: doc.data().title,
})
return {
props: {
posts
}
}
getStaticPaths の方がエラーの要因となったのだろうか。
Change let post = [] to let post = {} and it should work just fine.
との文言がある。オブジェクトに格納する形で試してみるか。
https://stackoverflow.com/questions/66083949/data-fetched-from-getstaticprops-is-not-displayed-in-page-component
下記の形に書き換え対応を実施。
//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
//const res = await fetch('https://jsonplaceholder.typicode.com/users');
//const data = await res.json();
let posts = {}
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")
let allPosts =getDocs(colRef)
for (const doc of allPosts.docs) {
console.log(doc.id, '=>', doc.data())
console.log('the id is....')
//let data = doc.data()
posts.push({...doc.data(),id:doc.id})
}
// map data to an array of path objects with params (id)
const paths = posts.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})
//console.log(paths)
return {
paths,
fallback: false
}
}
//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
let post = {}
const id = context.params.id;
//const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
//const data = await res.json();
//const data=[]
const colRef=collection(firebaseApp, "mydata")
const q =query(colRef,where("userid","==",id))
const allPosts=getDocs(q)
allPosts.forEach((doc) => {
const data = doc.data()
console.log(data.title)
post.title = data.title
post.details = data.details
post.details = data.userid
post.details = data.username
})
return {
props: { ninja: post }
}
}
allPosts.docでエラーが出ていたので下記に変更。
for (const doc of allPosts) {
これでもエラーが出ているので、forではなくmapを使用するか。
for (const doc of allPosts) {
console.log(doc.id, '=>', doc.data())
console.log('the id is....')
//let data = doc.data()
posts.push({...doc.data(),id:doc.id})
}
allPostsの各要素をidとコンテンツという形で格納していければよいはずなので、
allposts.map(doc => {
posts.push({...doc.data(),id:doc.id})
})
let allPosts =getDocs(colRef)
allPosts.map(doc => {
posts.push({...doc.data(),id:doc.id})
})
Mapに変えてもエラーとなってしまうのでallPostsを使わずにいってみる。
const paths = posts.forEach(ninja => {
return {
params: { id: ninja.id.toString() }
}
})
posts.forEach is not a function
なんとかエラーは解消できたが、pathsに何も入らないのでページがnot foundになる。
console.log('paths')
console.log(paths)
Doc.data()が怪しく感じたので試しに中身を抜き出してみた。
getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
//let books=[]
snapshot.docs.forEach(doc => {
//posts.push({...doc.data(),id:doc.userid})//...で新しいオブジェクトに入れている
//posts.push({id:doc.userid})
posts.push({...doc.data().username})
});
}).then(()=>console.log(posts))
[
{},
{},
{},
{},
{ '0': 'n', '1': 'a', '2': 'k', '3': 'i' },
{ '0': 'n', '1': 'a', '2': 'k', '3': 'i' }
]
オブジェクトの取り出しはできているので、単純なループで回数をカウントさせれば良いかと考えたが、同じuseridの複数投稿も考慮するとだめ。
Useridを一通り抜き出して入れる。重複がその際にどう影響するかも確認する。
userid.toString()はエラー。useridは表示されない。これはstringでデータベースに登録しているものしかconsole.logで表示されないよう。
getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
//let books=[]
snapshot.docs.forEach(doc => {
//posts.push({...doc.data(),id:doc.userid})//...で新しいオブジェクトに入れている
//posts.push({id:doc.userid})
posts.push({id:doc.data().userid})
});
}).then(()=>console.log(posts))
これによりpostsは的確にはき出せるようになった。
[ { id: 1 }, { id: 2 }, { id: 3 }, { id: 1 }, { id: 1 }, { id: 2 } ]
Pathの設定を様々な角度から試し中。
const entries =getDocs(colRef)
const paths = entries.docs.map(entry => ({
params: {
id: entry.data().userid.toString()
}
}));
// map data to an array of path objects with params (id)
// const paths = posts.map(ninja => {
// return {
// //params: { id: ninja.toString() }
// params: { id:ninja.toString() }
// }
// })
// const paths = posts.map((ninja) => ({
// params: { id: ninja.toString()}
// }))
console.log('paths')
console.log(paths)
なかなかうまく組み込めない。
シンプルなところから見直す。
https://stackoverflow.com/questions/65783199/error-getstaticpaths-is-required-for-dynamic-ssg-pages-and-is-missing-for-xxx
https://jsshowcase.com/question/getstaticpaths-is-required-for-dynamic-ssg-pages-and-is-missing-for-contentslug-slug
https://zenn.dev/yumiyoshi/scraps/f6220f26263103
問題はgetDocs()の型かもしれない。
getDocs()
Executes the query and returns the results as a QuerySnapshot 。
https://firebase.google.com/docs/reference/js/firestore_#getdocs
