错误：属性或方法“用户”未在实例上定义，但在渲染期间被引用

Question

我在显示存储在 Firebase 数据库集合中的数据时遇到问题。 最初我收到错误 “Function CollectionReference.doc() 要求其第一个参数的类型为非空字符串，但它是：未定义” 我可以通过在路由器配置文件中提供正确的路径来解决这个问题，但现在我收到了错误： 属性或方法“用户”未在实例上定义，但在渲染期间引用

代码

    <template>
    <div class="profile container">
        <h2 class="deep-purple-text center">Your information</h2>
                <div class="card-content">
                    <ul class="info">
                        <li v-for="(user, index) in users" :key="index">
                            <p>{{ profile.name }}</p>
                        </li>
                        <li v-for="(user, index) in users" :key="index">
                            <p>{{ profile.address }}</p>
                        </li>
                        <li v-for="(user, index) in users" :key="index">
                            <p>{{ profile.zip }}</p>
                        </li>
                        <li v-for="(user, index) in users" :key="index">
                            <p>{{ profile.phone }}</p>
                        </li>
                    </ul>
                </div>
        </div>
    </template>
    <script>
    import db from '@/firebase/init'
    import firebase from 'firebase'
    export default {
        data(){
            return{
                profile: null,


            }
        },
 created(){
    let user = firebase.auth().currentUser 
    db.firestore().collection('users').where('user_id', '==', user.uid).get()
    .then(snapshot => {
        snapshot.forEach((doc) => {
                this.profile = doc.data()
            })
        })
      }
    }
    </script>

这是另一个用户要求的我的路由器配置。

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import AddProduct from '@/components/AddProduct'
import EditProduct from '@/components/EditProduct'
import Signup from '@/components/Signup'
import Login from '@/components/Login'
import Userinfo from '@/components/Userinfo'
import firebase from 'firebase'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
    },
    {
      path: '/add-product',
      name: 'AddProduct',
      component: AddProduct,
    },
    {
      path: '/edit-product/:product_slug',
      name: 'EditProduct',
      component: EditProduct,
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/profile',
      name: 'Userinfo',
      component: Userinfo,
    }
  ]
})

router.beforeEach((to, from, next) => {
  if(to.matched.some(rec => rec.meta.requiresAuth)) {
    let user = firebase.auth().currentUser
    if(user){
      next()
    } else{
      next({ name: 'Login' })
    }
  } else{
    next()
  }
})
export default router

Answer 1

更正路由器配置问题后，您现在遇到以下错误：

属性或方法“用户”未在实例上定义，但 在渲染期间引用

这是因为，在模板中您引用了users，但该属性未在脚本的data 对象中声明。

你应该这样做：

export default {
 data(){
     return{
        users: []
     }
 },
 created(){
    let user = firebase.auth().currentUser 
    db.firestore().collection('users').where('user_id', '==', user.uid).get()
    .then(snapshot => {
        let usersArray = [];
        snapshot.forEach((doc) => {
             usersArray.push(doc.data());
        })
        this.users = usersArray;
      });
 }

---

现在，完整地说，您似乎只想在此页面中显示一位用户的个人资料。所以你可能不应该使用<li v-for="(user, index) in users" :key="index">，当你循环几个项目时使用它（即users这里）。但这可能应该是另一个问题的主题。