setDoc fails to resolve after page refresh

[builtbyjavi]

Operating System

Windows 11

Environment (if applicable)

node: 22, next: 12.3.4

Firebase SDK Version

11.7.1

Firebase SDK Product(s)

Firestore

Project Tooling

React / Typescript

Detailed Problem Description

I am trying to set data in Firestore based on a unique identifier in the url. I have a React hook that listens to Next.js Router.events and calls an update callback function on routeChangeComplete. When I navigate through my app, the related data I need is correctly added to Firestore; however, when I refresh the page the setDoc function hangs (i.e. the following line is never executed). I currently have a hacky workaround by introducing a small timeout around setDoc and I am really not sure why this works? Emphasis on this only happening when I refresh the page.

Steps and code to reproduce issue

useEffect(() => {
    syncData(window.location.href);

    Router.events.on('routeChangeComplete', syncData);

    return () => {
      Router.events.off('routeChangeComplete', syncData);
    };
}, []);


//NOT-WORKING (but should)
const syncData = useCallback(
    async (data) => {
        if (!documentReference) {
          return;
        }

       const firebaseFirestoreModule = await import('firebase/firestore');

        const { setDoc } = firebaseFirestoreModule;

        // we make it to here with the correct data
        await setDoc(documentReference, data, { merge: true });
        
        console.log('This is never reached and firestore document is never written to.');
    },
    [documentReference],
 );

//WORKING (but ugly)
const syncData= useCallback(
   async (data) => {
      return new Promise<void>((resolve) => {
        if (!documentReference) {
          resolve();
          return;
        }

       const firebaseFirestoreModule = await import('firebase/firestore');

        const { setDoc } = firebaseFirestoreModule;

        setTimeout(async () => {
          await setDoc(documentReference, data, { merge: true });
          resolve();
        }, 25);
      });
    },
    [documentReference],
  );

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[cherylEnkidu]

Hi @builtbyjavi ,

Could you please provide the debug log when the setData hangs?

[google-oss-bot]

Hey @builtbyjavi. We need more information to resolve this issue but there hasn't been an update in 5 weekdays. I'm marking the issue as stale and if there are no new updates in the next 5 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[builtbyjavi]

@cherylEnkidu here are the logs as requested. The relevant logs in this case are those regarding SessionStorage this is the document that is being written to.

This is the log file without the workaround that fails to write data to the SessionStorage document.
setDoc-debug.log

This is the log file with the workaround timeout that successfully writes data to the SessionStorage document.
setDoc-debug-workaround.log

[builtbyjavi]

hi @cherylEnkidu just checking in, any updates on this?