我正在构建一个故事编辑器,您可以在其中编写故事并将它们分成不同的章节,但我在访问NextJS的"getStaticPaths"的子集合时遇到了麻烦,因为每个文档都是一个UUID。
- 我将数据存储在Firebase Firestore中,如下所示:**
stories
├── UUID1 (Story 1)
│ └──chapters
│ └── UUID (Chapter 1)
│ └── UUID (Chapter 2)
│
│
├── UUID2 (Story 1)
│ └──chapters
│ └── UUID (Chapter 1)
│ └── UUID (Chapter 2)
│
- 问题**
我无法访问chapters子集合,因为我无法获取UUID。
通常,为了访问这些章节,我会创建一个useEffect钩子来将UUID存储到一个useState钩子中,这样我就可以像下面的代码那样发送一个查询:
const chaptersQ = query(
collection(db, "stories", story.data().id, "chapters")
);
不幸的是,在尝试创建动态路由时,"getStaticPaths"存在于main函数之前/之外,所以我不能使用react钩子。
- 这是我当前的代码:**
export const getStaticPaths = async () => {
const storyQ = collection(db, "stories");
const queryStory = await getDocs(storyQ);
queryStory.forEach(async (story) => {
const chaptersQ = query(
collection(db, "stories", story.data().id, "chapters")
);
const queryChapters = getDocs(chaptersQ);
return {
paths: (await queryChapters).docs?.map((doc) => ({
params: {
id: `${doc.data().storyID}`,
chapter: `${doc.data().chapter}`,
},
})),
};
});
};
这将返回一个无效错误,因为路径不知何故接收到一个undefined。
我已经花了几个小时在这上面了,我得到的最接近的方法是在文件的根层声明一个带有"let"的变量,然后把www.example.com一章推到它里面。doc.data into it.
然后在return语句中使用它来设置路径和参数。但是,这也返回了未定义的错误。
先谢谢你!
1条答案
按热度按时间nbysray51#
forEach
方法不返回值,因此paths
属性将无法正确设置,这意味着它将处于未定义状态。在我看来,有2种方法可以得到理想的结果:
1.您可以使用
map
函数来创建路径数组,然后返回它,而不是使用forEach
。这应该正确地创建了paths数组,但是您可能需要根据您的特定用例对其进行调整。
1.使用async/await并创建一个空数组,然后将路径推入其中。
如果让我选择使用哪种方法,我会选择第一种。因为
Promise.all()
给出了干净的代码。