使用 firebase firestore 显示用户个人数据 + 与 UID 反应而不是整个数据库

Question

你好！

所以我目前正在构建一个带有 React + firebase 的学生生产力应用程序，到目前为止，待办事项列表功能正在运行，但是，我希望每个用户的待办事项对他们来说都是独一无二的，而不只是给他们整个数据库的待办事项，我觉得这很棘手因为实际上没有任何关于将用户添加到数据库并将特定数据放入文档中的特定用户的文档，所以我的问题是我将如何做这样的事情

---

知乎：https://github.com/yefim94/personalworkflow
代码：

import {useEffect} from "react"
import { collection, doc, setDoc, query, getDocs, onSnapshot, addDoc, orderBy, limit, Timestamp} from "firebase/firestore"; 
import {db} from "/Users/yefimblokh/Desktop/bigprojectbusiness/my-app/src/firebase-config"
import { auth } from '/Users/yefimblokh/Desktop/bigprojectbusiness/my-app/src/firebase-config';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import Box from '@mui/material/Box';
const style = {
  position: 'absolute',
  top: '50%',
  borderRadius: "15px",
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  boxShadow: 24,
  p: 4,
};
const Projects = () => {
  const [todos, setTodos] = useState([])
  const [title, setTitle] = useState("")
  const [desc, setDesc] = useState("")
  const todosRef = collection(db, "todos");
  const {uid, photoURL, displayName} = auth.currentUser;
  async function getUID () {
    return uid;
  }
  useEffect(() => {
    const getData = async () => {
      const q = query(todosRef, orderBy("createdAt"))
      onSnapshot(q, (snapshot) => {
        let todos = []
        snapshot.forEach((doc) => {todos.push(doc.data())})
        setTodos(todos)
      })
    }
    getData()
  }, [])
  async function openModel () {
    handleOpen()
  }
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  async function addTaskDatabase () {
     await addDoc(todosRef, {
      title: title,
      desc: desc,
      createdAt: Timestamp.fromDate(new Date()),
      uid: uid
    }) 
    setTitle("")
    setDesc("")
    handleClose()
  }
  return (
    <div style={{margin: "3em 3em 3em 3em"}}>
      <h1 style={{fontWeight: "600", position: "sticky", top: "50px", backgroundColor: "#fff"}}>Project</h1>
      <section style={{backgroundColor: "#F5FAF8", padding: "1em", borderRadius: "14px", overflow: "scroll"}}>
        <div style={{display: "flex", widtgh: "100%", justifyContent: "space-between", alignItems: "center"}}>
        <h3>To do</h3>
        <p style={{
          backgroundColor: "#E9F3F2",
          padding: "9px",
          borderRadius: "10px",
          color: "#71A399"
        }}>4</p>
        </div>
        <button style={{
          backgroundColor: "#E9F3F2",
          padding: "9px",
          borderRadius: "10px",
          color: "#71A399",
          border: "none",
          outline: "none",
          width: "100%",
          cursor: "pointer"
        }} onClick={openModel}>+</button>
              <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <h3>Add Task</h3>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Title: <input type="text" onChange={(e) => {setTitle(e.target.value)}} value={title} />
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
           Description: <input type="text"  onChange={(e) => {setDesc(e.target.value)}} value={desc}/>
          </Typography>
          <button style={{
            backgroundColor: "red",
            border: "none",
            color: "#fff",
            padding: "10px"
            ,borderRadius: "5px 10px 5px 10px",
            marginTop: "1EM",
          }} onClick={addTaskDatabase}>Add</button>
        </Box>
      </Modal>
     {todos.map((doc, key, uid) => (
          <div key={key} style={{backgroundColor: "#fff", padding: "10px", borderRadius: "10px", marginTop: "1em"}}>
          <h3>{doc.title}</h3>
          <p>{doc.desc}</p>
        </div>
     ))}
      </section>
    </div>
  )
}

export default Projects```

Answer 1

就像我在上面的评论中所说的，这里有一个例子：

获取当前用户：

import { getAuth } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

创建待办事项时：

  async function addTaskDatabase () {
     await addDoc(todosRef, {
      title: title,
      desc: desc,
      createdAt: Timestamp.fromDate(new Date()),
      uid: uid,
      owner: user.uid //add user as owner
    }) 
  }

查询所有待办事项时

const getData = async () => {
  const snapshot = await todosRef.where('owner', '==', user.uid).orderBy("createdAt").get()
  if (snapshot.empty) {
   console.log('No matching todos.');
   return;
  }  
  let todos = []
  snapshot.forEach((doc) => {todos.push(doc.data())})
  setTodos(todos)
}

Answer 2

看看这个，这节省了我的一天 https://www.codemicros.com/2022/02/how-to-add-user-data-into-firebase-in.html