NextJS: getStaticPaths и getStaticProps

Question

Я очень новичок в NextJS, и я пробую getStaticPaths и getStaticProps с firebase для страницы деталей.

      import firebase from '../../firebase'

export const getStaticPaths = async () => {
  let posts = []
  const ref = firebase.firestore().collection('posts')
  try {
    let allPosts = await ref.get()
    for (const doc of allPosts.docs) {
      console.log(doc.id, '=>', doc.data())
      console.log('the id is....')

      let data = doc.data()
      console.log(data.ytid)
      posts.push({
        title: data.title,
        ytid: data.ytid,
      })
    }
  } catch (e) {
    console.log(e)
  }
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.ytid },
  }))

  return { paths, fallback: false }
}

export const getStaticProps = async (context) => {
  const id = context.params.id

  console.log('id is')
  console.log(id)

  let post = []

  try {
    const ref = firebase.firestore().collection('posts').where('ytid', '==', id)

    const qsnapshot = await ref.get()
    qsnapshot.forEach((doc) => {
      const data = doc.data()
      console.log('the title is...')
      console.log(data.title)
      post.title = data.title
      post.ytid = data.ytid
    })
    return {
      props: { post: post },
      revalidate: 1,
    }
  } catch (e) {
    console.log(e)
  }
}

const Details = ({ post }) => {
  console.log('posting...')
  console.log(post.title)
  return (
    <div>
      <div className='mx-auto'>
        <h2>Post Details Page</h2>
        <h3 className='text-black'>{post.title}</h3>
        <h4>Details here</h4>
      </div>
    </div>
  )
}

export default Details

Почему-то post.title не отображается в теге h3 на странице сведений, но когда я смотрю на консольный терминал, он печатается там. Таким образом, он отображается в бэкэнде, но не во фронтенде. Не очень уверен, что это вызвано какой-либо проблемой конфигурации, и любая помощь будет принята с благодарностью.

Answer 1

В вашем getStaticProps функция, которую вы инициализировали (я предположил по ошибке?), даже если вы можете добавлять свойства к массиву (который является объектом), свойства игнорируются при преобразовании массива в JSON.

Когда страница с getStaticProps предварительно отрисовывается во время сборки, в дополнение к HTML-файлу страницы Next.js создает файл JSON, содержащий результат выполнения getStaticProps. док

+ Изменить let post = [] к let post = {} и он должен работать нормально.