Issue with data from getInitialProps in _app.js

Hey, I'm having an issue displaying data pulled in from getInitialProps in the _app.js file. I have followed the slice machine tutorial, which includes defining a header and navigation in Prismic and displaying that data on the frontend - that all works fine.

I've defined a footer now, have included the call for the footer data in the same place and way I have for the header data in the _app.js file but that data does not display on the frontend. The error message I am seeing is:

The error is pulling up the _document.js file, but I cannot understand where the issue is with that file?

_document.js:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { repoName } from '../prismicConfiguration'
import Link from 'next/link'

export default class extends Document {

  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html lang="en">
				<Head>
					<script async defer src={`//static.cdn.prismic.io/prismic.js?repo=${repoName}&new=true`} />
				</Head>
        <body className="">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

_app.js:

import React from 'react'
import NextApp from 'next/app'
import { Client } from '../utils/prismicHelpers'
import '../styles/style.scss'

export default class MyApp extends NextApp {

  static async getInitialProps(appCtx) {
		const menu = await Client().getSingle('menu') || null
		const footer = await Client().getSingle('footer') || null

		console.log("FOOTER", footer)
		console.log("MENU",menu)

    return {
      props: {
        menu: menu,
				footer: footer
      },
    }
  }

  render() {
    const { Component, pageProps, props } = this.props
    return (
      <Component {...pageProps} menu={props.menu} footer={props.footer} />
    )
  }
}

Footer.js (where the data should be getting displayed):

import React from 'react'
import Link from 'next/link'

// Project functions
import { linkResolver } from '../prismicConfiguration'
import { RichText } from 'prismic-reactjs'

// Footer component
export default function Footer({ footer }) {

	return (

		<footer className="footer">
			<div className="container max-width-lg">
				{footer.data.eyebrow}
				<RichText render={footer.data.headline} />
				<RichText render={footer.data.description} />
				<Link href={linkResolver(footer.data.link)}>
					<a>
						{footer.data.linkLabel}
					</a>
				</Link>

				{ footer.data.copyrightText }
				{ footer.data.signoffText }
			</div>
		</footer>

	)
}

Apologies for the long post, I'm so confused as to why this footer data cannot be displayed or read when it has been defined and called in the same way as the header, which works completely fine. I am console logging both sets of data in the _app.js file and both are returned fine in the terminal. For some context, the reason I am pulling this data in the _app.js file is that its data that needs to be across all pages rather than calling it on every single page.

Where am I going wrong? Thanks

Hey @jon1, there doesn't seem to be anything wrong with your setup.
Are you making sure the Footer document is published in your repository, the warning indicates that data might be empty. You can try and add an optional chaining '?.' to ensure that the value will get rendered if it isn't null, like so:

footer.data?.eyebrow

Hey @Pau, that is what I thought. The document is published, and I have tried chaining a '?' and there are no errors at that point, but the text data is not getting displayed still. I don't really know what else to try :joy:

What is the URL of your repository? I can try and run a test on my end.

Thanks, the URL is https://jon-quayle-design.prismic.io. Does it need to be set as public for the test?

No, it's ok like that.
I just finished the test. I couldn’t find any issues with querying your data. The footer content in the eyebrow field gets rendered just fine, it displays Let's talk. Maybe delete the cache of the project and try again?