NextJS React Firestore 无法在第一次加载时读取属性

Question

I am working on a React NextJS project with Firebase v9 with THREE.JS. I am trying to load the following:

 const texture = useTexture(floorDoc.url)

The issue I am facing is on the first load. I get an error in my console saying, "TypeError: Cannot read properties of undefined (reading 'url')," a common error for an undefined element, even though it is defined in my Firestore DB.

If I replace (floorDoc.url) with a general website string then reload and re-add (floorDoc.url) back into my code it reads the correct Firestore document perfectly and works as intended so I am lost as to why it cant fetch on the first request.

Here is my code:

export default function FloorComponent({ postRef }) {
  const floorRef = postRef.collection('assets').doc('floor');
  const [floorDoc] = useDocumentData(floorRef);

  const [ref] = usePlane(() => ({
    rotation: [-Math.PI / 2, 0, 0],
  }));
  const texture = useTexture(floorDoc.url)

  return (
    <mesh rotation={[-Math.PI / 2, 0, 0]}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshBasicMaterial map={texture}
      />
    </mesh>
  );
}

Answer 1

Have you tried with a conditional return?

return texture ? (
    <mesh rotation={[-Math.PI / 2, 0, 0]}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshBasicMaterial map={texture}
      />
    </mesh>
    ) : 'Some fallback...' 
`

Answer 2

you should do this server side, export following in the page you want this,

 export async function getServerSideProps() { const floorRef = await postRef.collection('assets').doc('floor') return { props: { floorRef } } }

and you will find floorRef in props of the component

 export default function FloorComponent({ postRef, floorRef }) { const [floorDoc] = useDocumentData(floorRef); const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], })); const texture = useTexture(floorDoc.url) return ( <mesh rotation={[-Math.PI / 2, 0, 0]}> <planeBufferGeometry attach="geometry" args={[100, 100]} /> <meshBasicMaterial map={texture} /> </mesh> ); }