NextJS: Как правильно использовать getStaticProps для firebase

Я очень новичок в NextJS и не мог заставить getStaticProps работать правильно.

import firebase from '../firebase'

export default function Home({ posts }) {
  return (
    <div>
      <h1>All Posts</h1>
      {posts.map((post) => (
        <div key={post.pid}>{post.title}</div>
      ))}
    </div>
  )
}

export const getStaticProps = async () => {
  let posts = []
  firebase
    .firestore()
    .collection('posts')
    .orderBy('createdAt', 'desc')
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(function (doc) {
        console.log(doc.data().title)
        console.log(doc.data().pid)
        posts.push({
          pid: doc.data().pid,
          title: doc.data().title,
        })
      })
      console.log(posts)
    })
    .catch(function (error) {
      console.log('Error getting documents: ', error)
    })

  return {
    props: {
      posts,
    },
  }
}

Когда я использую console.log (сообщения) в getStaticProps, я вижу сообщения, но почему-то они не отображаются в компоненте Home. Любая помощь будет принята с благодарностью.


reactjs javascript google-cloud-firestore next.js getstaticprops
person Daryl Wong    schedule 05.02.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что вы не ждете завершения обещания, возвращенного из get(), таким образом возвращая пустой posts (вы заполняете эту переменную только после возврата обещания в части then). Фактически, если вы поместите console.log(posts) прямо перед возвратом (вместо then части наблюдаемого), вы увидите, что там пусто.

Так что вам просто нужно await это ... что-то вроде (очевидно, непроверенного):

export const getStaticProps = async () => {
    let posts = []
    try 
    {
      // await the promise
      const querySnapshot = await firebase
        .firestore()
        .collection('posts')
        .orderBy('createdAt', 'desc')
        .get();
    
      // "then" part after the await
      querySnapshot.forEach(function (doc) {
        console.log(doc.data().title)
        console.log(doc.data().pid)
        posts.push({
          pid: doc.data().pid,
          title: doc.data().title,
        })
      })
      console.log(posts)
    } catch(error) {
        // catch part using try/catch
        console.log('Error getting documents: ', error)
        // return something else here, or an empty props, or throw an exception or whatever 
    }

    return {
        props: {
          posts
        }
    }
}
person Jcl    schedule 05.02.2021