如何基于用户最近活跃时间从Firestore返回用户资料？

一、修正时间存储逻辑（关键前提） #

你当前的时间计算方式（currentDate.getHours() * 3600 + ...）仅统计当天秒数，跨天后会出现逻辑错误（比如凌晨0点数值重置为0，导致历史活跃时间看起来远大于当前值）。正确做法是：

• 用户触发点击事件时，将Lastactive字段更新为Unix时间戳（毫秒/秒级均可，保持统一即可）：

  // 示例：更新用户Lastactive为当前毫秒时间戳
  await projectFirestore.collection('Premium').doc(userId).update({
    Lastactive: Date.now()
  })
  

二、Firestore端过滤（推荐方案） #

直接在Firestore查询阶段过滤出过去30分钟内活跃的用户，减少前端数据传输量，提升性能。

方法1：改造getPremium支持查询条件 #

更新getPremium.js，让它可以接收自定义查询约束：

import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"

const getPremium = (queryConstraints = []) => {
    const Premium = ref([])
    const error = ref(null)

    const load = async () => {
        try{
            let query = projectFirestore.collection('Premium')
            // 依次应用查询条件
            queryConstraints.forEach(constraint => {
                query = query.where(...constraint)
            })
            const res = await query.get()

            Premium.value = res.docs.map(doc => {
               return {...doc.data(), id: doc.id}
            })
        }
        catch (err){
            error.value = err.message
            console.log(error.value)
        }
    }

    return { Premium, error, load}
}

export default getPremium

在Vue组件中调用：

<script>
import getPremium from "../Composables/getPremium.js";
export default {
    setup() {
        // 计算30分钟前的毫秒时间戳
        const thirtyMinutesAgo = Date.now() - 30 * 60 * 1000;
        const { Premium, error, load } = getPremium([
            ['Lastactive', '>=', thirtyMinutesAgo]
        ]);
        load();

        return { Premium, error };
    }
}
</script>

方法2：实时监听活跃用户（可选） #

如果需要实时更新活跃用户列表，将get()替换为onSnapshot，实现数据实时同步：

// 在getPremium的load函数中修改
const load = async () => {
    try{
        let query = projectFirestore.collection('Premium')
        queryConstraints.forEach(constraint => {
            query = query.where(...constraint)
        })
        // 实时监听集合变化
        query.onSnapshot(snapshot => {
            Premium.value = snapshot.docs.map(doc => {
                return {...doc.data(), id: doc.id}
            })
        })
    }
    catch (err){
        error.value = err.message
        console.log(error.value)
    }
}

三、前端过滤方案（仅适合小数据量场景） #

如果用户数据量很小，也可以在前端完成过滤，但大数据量场景下不推荐（会加载全量数据，浪费带宽）：

方式1：用计算属性过滤 #

<script>
import getPremium from "../Composables/getPremium.js";
import { computed } from "vue";
export default {
    setup() {
        const { Premium, error, load } = getPremium();
        load();

        // 计算属性返回活跃用户列表
        const activeUsers = computed(() => {
            const thirtyMinutesAgo = Date.now() - 30 * 60 * 1000;
            return Premium.value.filter(user => user.Lastactive >= thirtyMinutesAgo);
        });

        return { activeUsers, error };
    }
}
</script>

<template>
    <div v-for="user in activeUsers" :key="user.id">
        <!-- 渲染用户信息 -->
    </div>
</template>

方式2：配合v-if过滤 #

<template>
    <div v-for="user in Premium" :key="user.id" v-if="isActive(user)">
        <!-- 渲染用户信息 -->
    </div>
</template>

<script>
import getPremium from "../Composables/getPremium.js";
export default {
    setup() {
        const { Premium, error, load } = getPremium();
        load();

        const isActive = (user) => {
            const thirtyMinutesAgo = Date.now() - 30 * 60 * 1000;
            return user.Lastactive >= thirtyMinutesAgo;
        };

        return { Premium, isActive, error };
    }
}
</script>

四、注意事项 #

• Firestore查询需要为Lastactive字段创建索引，首次运行查询时，控制台会给出创建索引的链接，直接点击即可完成创建。
• 时间戳格式要统一：如果存储的是秒级时间戳（Math.floor(Date.now()/1000)），查询时也要用秒级计算（Math.floor(Date.now()/1000) - 30*60）。

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