Nuxt.js中Firebase预渲染阶段Vuex数据获取问题求助

Hey there! Let's figure out why your user data is coming up undefined/null in Nuxt.js and fix this properly.

First, let's break down the core issue: Nuxt.js uses Server-Side Rendering (SSR) by default, which means your app runs both on the server and the client. The Vuex store gets initialized separately on each side, so when you try to access getUser right away, it might not exist yet—especially since Firebase Auth's user state is often loaded asynchronously on the client. Your setTimeout trick didn't work because the user state might not be ready even after 5 seconds, or the way you're accessing the store might not align with Nuxt's lifecycle.

Let's start with nuxtServerInit (for SSR scenarios) #

nuxtServerInit is Nuxt's special action that runs only on the server when the app starts. It's the perfect place to pre-load data that needs to be available for server-rendered pages. But there's a catch with Firebase Auth: the server can't directly access the user's browser-based auth session. To get the user on the server, you need to use Firebase's Admin SDK to verify the user's ID token from cookies.

Here's how to set this up:

1. First, create a root store file (since nuxtServerInit must live in the root store/index.js, not in sub-modules):

// store/index.js
import admin from 'firebase-admin'

// Initialize Firebase Admin (make sure you have your service account key file)
if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert(require('../serviceAccountKey.json')),
    databaseURL: 'YOUR_FIREBASE_DATABASE_URL'
  })
}

export const actions = {
  async nuxtServerInit({ commit }, { req }) {
    // Grab the Firebase Auth token from cookies (Firebase stores it in __session by default)
    const authToken = req.cookies?.['__session']
    
    if (authToken) {
      try {
        // Verify the token to get the user's UID
        const decodedToken = await admin.auth().verifyIdToken(authToken)
        // Fetch the full user object from Firebase Admin
        const firebaseUser = await admin.auth().getUser(decodedToken.uid)
        
        // Commit the user to your common store module
        commit('common/setUser', { id: firebaseUser.uid, ...firebaseUser.toJSON() })
        
        // Now fetch the user's notifications directly on the server
        const notificationsSnapshot = await admin.database()
          .ref(`users/${firebaseUser.uid}/notifications`)
          .limitToLast(5)
          .once('value')
        
        commit('front/setUserNotifications', notificationsSnapshot.val())
      } catch (err) {
        console.error('Failed to verify user token:', err)
      }
    }
  }
}

2. Make sure your Firebase Auth is set to store the token in cookies (this is default for web, but double-check your client-side auth setup).

For client-side only scenarios (if you don't need SSR for notifications) #

If your notifications don't need to be server-rendered, you can wait until the client has loaded the user state before fetching them. Here's how:

1. First, set up a client-side auth init action in your common store module to listen for Firebase Auth state changes:

// store/common/index.js
export const state = () => ({
  user: null
})

export const mutations = {
  setUser(state, user) {
    state.user = user
  }
}

export const actions = {
  initAuth({ commit }) {
    // Return a promise so we can wait for auth to initialize
    return new Promise(resolve => {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          commit('setUser', { id: user.uid, ...user })
        } else {
          commit('setUser', null)
        }
        resolve()
      })
    })
  }
}

export const getters = {
  getUser: state => state.user
}

2. Create a client-side plugin to run this auth init when the app loads:

// plugins/firebase-auth.js
export default ({ store }) => {
  // Only run this on the client
  if (process.client) {
    store.dispatch('common/initAuth')
  }
}

3. Register the plugin in nuxt.config.js:

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/firebase-auth.js', mode: 'client' }
  ]
}

4. Update your fetchUserNotifications action to wait for the user to be available:

// store/front/index.js
export const actions = {
  async fetchUserNotifications({ commit, rootGetters }) {
    // Wait until the user is loaded in the common store
    let user = rootGetters['common/getUser']
    while (!user) {
      // Wait 100ms and check again (avoids blocking the event loop)
      await new Promise(resolve => setTimeout(resolve, 100))
      user = rootGetters['common/getUser']
    }

    // Now fetch the notifications
    return firebase.database()
      .ref(`users/${user.id}/notifications`)
      .limitToLast(5)
      .on('value', snapshot => {
        commit('setUserNotifications', snapshot.val())
      })
  }
}

5. Call this action in your component's mounted hook (since mounted runs only on the client):

<template>
  <div class="notifications">
    <!-- Your notifications display here -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch('front/fetchUserNotifications')
  }
}
</script>

Why your original setTimeout didn't work #

Fixed-time delays are unreliable because Firebase Auth's state load time varies (network speed, etc.). Instead, we either use the server-side init with Admin SDK (for SSR) or wait for the auth state to be ready on the client with a promise/loop.

内容的提问来源于stack exchange，提问作者fatihsolhan