如何从 Firestore 中检索 timeStamp 属性？

Question

我为用户使用了一个表单来创建工单，让他们输入他们的全名、电子邮件、主题和描述。 我能够从云 Firebase 集合中获取所有数据，但我无法获取 timeStamp 属性。

这就是我用来向 Firestore 数据库添加票证的方法。

import React from 'react'
import './addInvoice.scss'
import Sidebar from '../../components/sidebar/Sidebar'
import Navbar from '../../components/navbar/Navbar';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { serverTimestamp, addDoc, collection } from "firebase/firestore";
import { db } from '../../firebase';



const Invoice = ({ inputs, title }) => {
    const [data, setData] = useState({});

    

    const handleInput = (e) => {
        const id = e.target.id;
        const value = e.target.value;
        setData({ ...data, [id]: value })
        console.log(data);

    }

    const handleAddInvoice = async (e) => {
        e.preventDefault();

        try {
            // Add a new document with a generated id.
            await addDoc(collection(db, "invoices"), {
                ...data,
                timeStamp: serverTimestamp()
            });


        } catch (err) {
            console.log(err)
        }
    }

    return (
        <div className="invoice">
            <Sidebar />
            <div className="invoiceContainer">
                <Navbar />
                <div className="top">
                    <h1 className="title">{title}</h1>
                </div>
                <div className="bottom">
                    <div className="left">
                        left</div>
                    <div className="right">
                        <form onSubmit={handleAddInvoice}>
                            {inputs.map((input) => (
                                <div className="formInput" key={input.id}>
                                    <label>{input.label}</label>
                                    <input id={input.id} onChange={handleInput} type={input.type} placeholder={input.placeholder} />
                                </div>
                            ))}
                            <div className="formInput">
                                <textarea placeholder="enter text here...">
                                </textarea>
                            </div>
                            <button type="submit">SEND</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Invoice

这就是我用来获取数据并将其添加到表中的方法：

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { useState, useEffect } from 'react';
import { collection, deleteDoc, doc, onSnapshot } from 'firebase/firestore';
import { db } from '../../firebase';

const Tables = () => {
    const [data, setData] = useState([]);

    useEffect(() => {

        const unsub = onSnapshot(collection(db, "tickets"), (snapshot) => {
            let list = [];
            snapshot.docs.forEach((doc) => {
                list.push({ id: doc.id, ...doc.data() });
            })
            setData(list)
        }, (err) => {
            console.log(err)
        });

        return () => {
            unsub();
        }

    }, [])

    const deleteData = async (id) => {
        try {
            await deleteDoc(doc(db, "tickets", id));
            setData(data.filter((item) => item.id !== id));
        } catch (err) {
            console.log(err)
        }
    }

    return (
        <TableContainer component={Paper} className="table">
            <Table sx={{ minWidth: 650 }} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell className="tableCell">Subject</TableCell>
                        <TableCell className="tableCell">Fullname</TableCell>
                        <TableCell className="tableCell">Email</TableCell>
                        <TableCell className="tableCell">Date</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((item) => (
                        <TableRow key={item.id}>
                            <TableCell className="tableCell">{item.subject}</TableCell>
                            <TableCell className="tableCell">{item.fullname}</TableCell>
                            <TableCell className="tableCell">{item.email}</TableCell>
                            <TableCell className="tableCell">{item.timeStamp}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    )
}

export default Tables

Answer 1

item.timeStamp 是一个 firestore.Timestamp 它实际上是一个包含 _seconds 和 _nanoseconds 的对象

要将其显示为日期，您需要使用：

item.timeStamp.toDate()

或者

item.timeStamp.toDate().toDateString()

或者

新日期（item.timeStamp._seconds * 1000）